zoukankan      html  css  js  c++  java
  • 双击文字文字变为可以编辑

    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </head>

    <body>
    <fieldset>
    <legend>双击用户名进行编辑</legend>
    <dl>
    <dt>你的用户名:</dt>
    <dd ondblclick="ShowElement(this)">诸葛亮</dd>
    </dl>
    </fieldset>

     
    <script type="text/javascript">
     
    function ShowElement(element) {
     
    var oldhtml = element.innerHTML;
    //如果已经双击过,内容已经存在input,不做任何操作
     
    if (oldhtml.indexOf('type="text"') > 0) {
     
    return;
     
    }
    //创建新的input元素
     
    var newobj = document.createElement('input');
    //为新增元素添加类型
    newobj.type = 'text';
    //为新增元素添加value值
    newobj.value = oldhtml;
    //为新增元素添加光标离开事件
    newobj.onblur = function () {
    element.innerHTML = this.value == oldhtml ? oldhtml : this.value;
    //当触发时判断新增元素值是否为空,为空则不修改,并返回原有值
     
    }
    //设置该标签的子节点为空
    element.innerHTML = '';
    //添加该标签的子节点,input对象
    element.appendChild(newobj);
    //设置选择文本的内容或设置光标位置(两个参数:start,end;start为开始位置,end为结束位置;如果开始位置和结束位置相同则就是光标位置)
    newobj.setSelectionRange(0, oldhtml.length);
    //设置获得光标
    newobj.focus();
    }
    </script>
    </body>

    </html>
  • 相关阅读:
    java流程控制02Scanner进阶使用
    java流程控制01用户交互scanner
    java流程控制05Switch选择结构
    java基础10三元运算符
    CSDN的轮换广告JS
    如何在DataGrid中加入javascript以进行客户端的操作
    Json 的日期格式到.net datetime格式
    利用web.config设置用户不被锁定
    用csc.exe编译程序的例子
    严重关注食物安全
  • 原文地址:https://www.cnblogs.com/fdxxiaobai/p/7894842.html
Copyright © 2011-2022 走看看