想要实现像网盘一样,点击重命名按钮,将文件的文件名,变成一个输入框,可以在里面修改文件名。
目前是对一个按钮进行操作,如果是多个,还要进行修改。欢迎讨论,提供更好的方法。
<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>