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

最新推荐文章于 2024-08-29 10:04:34 发布

原创最新推荐文章于 2024-08-29 10:04:34 发布 · 1.4w 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #修改内容 #点击按钮修改文字 #js

javascript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种通过点击按钮使文件名变为可编辑状态的方法，实现了类似网盘的文件重命名功能。具体步骤包括：使用JavaScript监听按钮点击事件，将文件名替换为输入框，并在用户确认后更新文件名。

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

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

<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>