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

最新推荐文章于 2024-04-22 21:52:14 发布

24号同学

最新推荐文章于 2024-04-22 21:52:14 发布

阅读量1.3w

点赞数 1

分类专栏： javascript 文章标签： javascript 修改内容点击按钮修改文字 js

本文链接：https://blog.csdn.net/kobe2016/article/details/78803502

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

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

<html>
<head></head>
<body>
<button id="click">重命名</button>
<div id="t">文件名</div>
<script type="text/javascript">
document.getElementById("click").οnclick=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>

24号同学

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
js实现点击按钮出现输入框本地修改文字内容功能

想要实现像网盘一样，点击重命名按钮，将文件的文件名，变成一个输入框，可以在里面修改文件名。目前是对一个按钮进行操作，如果是多个，还要进行修改。欢迎讨论，提供更好的方法。重命名文件名document.getElementById("click").onclick=function(){ //与后台交互的函数updatefile var upda
复制链接

扫一扫