javascript实现双击编辑可修改状态的方法

2019-03-08 network gramer 点击: 评论
效果展示:代码:<!DOCTYPE html PUBLIC "- W3C DTD XHTML 1 0 Transitional EN" "http: www w3 org TR xhtml1 DTD xhtml1-

天晟网络 小编在整理编程教程 > JavaScript > 看到javascript实现双击编辑可修改状态的方法,下面是小编47为您找到的38067相关内容,希望47对您有帮助。

效果展示:

代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>javascript实现双击编辑可修改状态的方法 免费教程 www.timsion.com</title>
<meta http-equiv="content-type" content="text/html;charset=utf8">
<script type="text/javascript">
function ShowElement(element)
{
var oldhtml = element.innerHTML;
var newobj = document.createElement('input');
//创建新的input元素
newobj.type = 'text';
//为新增元素添加类型
newobj.onblur = function(){
element.innerHTML = this.value ? this.value : oldhtml;
//当触发时判断新增元素值是否为空,为空则不修改,并返回原有值
}
element.innerHTML = '';
element.appendChild(newobj);
newobj.focus();
}
</script>
</head>
<body>
<dl>
 <dt>网站名称:</dt>
 <dd ondblclick="ShowElement(this)">免费教程 </dd>
 <dt>网站网址:</dt>
 <dd ondblclick="ShowElement(this)">www.timsion.com</dd>
</dl>
</body>
</html>

转载文章请标明来自天晟网 Timsion.Com > 编程教程 > JavaScript >
标题:javascript实现双击编辑可修改状态的方法
网址:http://www.timsion.com/javas/38067.html

上一篇:javascript实现表单检测及表单提示的方法
下一篇:javascript让元素居中显示的方法

免责声明:以上内容来自互联网和用户投稿,不代表本站的观点和立场,版权归原作者所有,如有侵权,请与我们联系。