您的位置：首页 > Web前端 > JavaScript

js实现点击按钮出现输入框本地修改文字内容功能

2017-12-14 16:17 1226 查看

想要实现像网盘一样，点击重命名按钮，将文件的文件名，变成一个输入框，可以在里面修改文件名。

目前是对一个按钮进行操作，如果是多个，还要进行修改。欢迎讨论，提供更好的方法。

<html>
<head></head>
<body>
<button id="click">重命名</button>
<div id="t">文件名</div>
<script type="text/javascript">
document.getElementById("click").onclick=function(){
//与后台交互的函数updatefile
var updatefile = function(id, name) {
alert(id);
alert(name);
}
var text=document.getElementById("t");
var val=text.innerHTML;
text.innerHTML="<input type='text' id='n' value="+val+" /><input type='button' id='btn_1' data-key='1' value='取消'><input type='button' id='btn_2' data-key='2' value='确定'>";

document.getElementById("btn_1").addEventListener("click",function(){
text.innerHTML = val;
});

document.getElementById("btn_2").addEventListener("click",function(e){
var target = e.target;
var input=document.getElementById("n");
text.innerHTML = input.value;
updatefile(target.dataset.key, input.value)
});
};
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航