Fatal编程技术网
  • javascript/
  • Javascript 如何在HTML页面中将图像转换为文本框？

Javascript 如何在HTML页面中将图像转换为文本框？

javascript html css

Javascript 如何在HTML页面中将图像转换为文本框？,javascript,html,css,Javascript,Html,Css,我有一个HTML页面中的小图像。如果我点击图片，它会被转换成一个文本框，并且在文本框旁边会出现两个链接。谁能帮我一个Javascript函数，我可以在onClick上调用它 为了更好地理解，请查看附件中的图片 try this <span id="my"><img src="image.png" onClick="z()"></span> <span id="dis" style="display:none"> <input type="t

我有一个HTML页面中的小图像。如果我点击图片，它会被转换成一个文本框，并且在文本框旁边会出现两个链接。谁能帮我一个Javascript函数，我可以在
onClick上调用它

为了更好地理解，请查看附件中的图片


 try this
<span id="my"><img src="image.png" onClick="z()"></span>
<span id="dis" style="display:none">
<input type="text" id="text"><a href="example.html">submit</a>
<a href="example2.html">cancel</a></span>
<script>
function z()
{
document.getElementById("my").style.display="none"; 
document.getElementById("dis").style.display="";    
}
</script>



试试这个
函数z（）
{
document.getElementById（“my”）.style.display=“无”；
document.getElementById（“dis”）.style.display=“”；
}

下面是一个jquery实现：

HTML:

工作小提琴：
尝试以下代码


<!DOCTYPE html>
<html>
<body>

<p id="demo">Click on Image change it into text input.</p>


<script type="text/javascript">
function showStuff() {
    // show text input
    document.getElementById('mytextbox').style.display = 'block';
    // hide image
    document.getElementById('myimage').style.display = 'none';
}
</script>


<td class="post">
<img id="myimage" src="mypic.png" name="pic" onclick="showStuff()"/>
<span id="mytextbox" style="display: none;">
<input type="text" name="mytextinput">
</span>

</td>

</body>
</html>




单击图像将其更改为文本输入

函数showStuff（）{
//显示文本输入
document.getElementById（'mytextbox'）。style.display='block'；
//隐藏图像
document.getElementById（'myimage'）.style.display='none'；
}

请通过以下JSFIDLE获取所需的输出链接：



对于您的信息，您需要添加jQuery代码，如：


$( ".img-class" ).click(function() {
  $(this).hide();
  $(".text-class").show();  
});



<p class="img-class">
    <img src="http://s7.postimg.org/a5m750wnr/Screen_Shot_2014_05_29_at_5_06_07_PM.png" />
<p>                
<p class="text-class" style="display:none;">
  <input type="text" name="textbox">&nbsp;<a href="#">Submit</a>&nbsp;<a href="#">Cancel</a>
<p>    


Html代码如下：


$( ".img-class" ).click(function() {
  $(this).hide();
  $(".text-class").show();  
});



<p class="img-class">
    <img src="http://s7.postimg.org/a5m750wnr/Screen_Shot_2014_05_29_at_5_06_07_PM.png" />
<p>                
<p class="text-class" style="display:none;">
  <input type="text" name="textbox">&nbsp;<a href="#">Submit</a>&nbsp;<a href="#">Cancel</a>
<p>    









tythis：


    <!doctype html>
    <html lang="en">
<head>
  <meta charset="utf-8">
  <title>test</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <style>
        .container{position: relative;}
        .Myimg{height: 50px; width: 50px; position: absolute; top:0; left: 0}
        .myform{display: none;position: absolute; top:5px; left: 0}
    </style>
    <script>
        $(document).ready(function() {
        $( ".Myimg" ).click(function() {
            $( ".myform" ).fadeIn( "slow", function() {
            $( ".Myimg" ).fadeOut( "slow");
            });
        });

        $( ".cancel" ).click(function() {
            $( ".Myimg" ).fadeIn( "slow", function() {
            $( ".myform" ).fadeOut( "slow");
            });
        });
        })
    </script>
</head>


<body>
<div class="container">
    <img src="http://icons.iconarchive.com/icons/custom-icon-design/office/256/edit-icon.png" class="Myimg" alt="myImg" />
    <div class="myform">
        <form action="index.html" >
            <input type="text" id="myInput" />
            <a href="#">submit</a>
            <a href="#" class="cancel">cancel</a>
        </form>
    </div>
</div>
</body>
</html>




测试
.container{位置：相对；}
.Myimg{高度：50px；宽度：50px；位置：绝对；顶部：0；左侧：0}
.myform{显示：无；位置：绝对；顶部：5px；左侧：0}
$（文档）.ready（函数（）{
$（“.Myimg”）。单击（函数（）{
$（“.myform”）.fadeIn（“慢”，函数（）{
美元（“.Myimg”）。淡出（“缓慢”）；
});
});
$（“.cancel”）。单击（函数（）{
$（“.Myimg”）.fadeIn（“慢”，函数（）{
$（“.myform”）.fadeOut（“慢”）；
});
});
})

这里有一个更通用的解决方案。
这是一个演示，单击图像：


函数InlineEditor（）{
变量字段名；
变量切换元件；
var editorTemplate=''；
var编辑元素；
this.renderditor=函数（）{
var节点=document.createElement（“div”）；
node.style.display='none'；
node.innerHTML=editorTemplate.replace（“%name%”，this.fieldName）；
返回节点；
}
this.setFieldName=函数（fieldName）{
this.fieldName=字段名；
}
this.isEditorVisible=函数（）{
return（this.editorElement.style['display']！='none'）；
}
this.ontoggleditor=函数（）{
if（this.isEditorVisible（））
this.editorElement.style.display='none'；
其他的
this.editorElement.style.display='block'；
}
this.setToggleElement=函数（元素）{
this.toggleElement=元素；
var self=这个；
元素。addEventListener（“单击”，函数（）{
self.ontoggleditor（）；
});
this.editorElement=this.toggleElement.parentNode.appendChild（this.renderEditor（））；
}
}
testEditor=新的InlineEditor（）；
testEditor.setFieldName（“测试”）；
setToggleElement（document.getElementById（“test”）；

HTML

JS

演示

单击时是否会产生某种过渡效果？用链接淡出图像和淡入输入怎么样？请显示您尝试发布的一些代码图像应该是淡出的，在那个地方文本框和两个链接应该出现注意：我删除了Java标记。Javascript不是Java。你想要一个纯JS的解决方案，还是允许jquery？如果是JS，那就完美了，或者我们可以通过jquery实现它，那就好了。

function InlineEditor(){
    var fieldName;
    var toggleElement;
    var editorTemplate = '<input type="text" name="%name%" /><input type="submit" value="Submit" /><input type="reset" value="Reset" />';
    var editorElement;

    this.renderEditor = function (){
        var node = document.createElement("div");
        node.style.display = 'none';
        node.innerHTML = editorTemplate.replace("%name%", this.fieldName);
        return node;
    }

    this.setFieldName = function (fieldName){
        this.fieldName = fieldName;
    }

    this.isEditorVisible = function(){
        return (this.editorElement.style['display'] != 'none');
    }

    this.onToggleEditor = function(){

        if(this.isEditorVisible())
            this.editorElement.style.display = 'none';
        else
           this.editorElement.style.display = 'block'; 
    }

    this.setToggleElement = function(element){
        this.toggleElement = element;
        var self = this;
        element.addEventListener("click", function(){
           self.onToggleEditor();       
        });
        this.editorElement = this.toggleElement.parentNode.appendChild(this.renderEditor());

    }
}

testEditor = new InlineEditor();
testEditor.setFieldName("test");
testEditor.setToggleElement(document.getElementById("test"));



      <div class="resim">
        <img class="image" src="image.png"/>
      </div>
      <div class="txt">  
        <input type="text"/>
      </div>



.txt{
    display:none;
}

.resim{
    width:100px;
    height:100px;
    cursor:pointer;
}



$(document).ready(function(){
    $(".resim").click(function(){
        $(".txt").show(function(){
            $(".resim").hide();
        });
    });
});