Home >Web Front-end >JS Tutorial >JS method to implement double-click editing to modify the state_javascript skills

JS method to implement double-click editing to modify the state_javascript skills

WBOYOriginal: 2016-05-16 15:45:061355browse

The example in this article describes the method of JS to implement double-click editing to modify the state. Share it with everyone for your reference. The details are as follows:

This is a popular form effect now. Click on a text on the web page, and the text will change to the editing state, or new text will be entered. This is an example of JavaScript controlling the form. The following code can achieve it Double-click editable username and signature files.

The operation effect is as shown below:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-double-click-edit-style-codes/

The specific code is as follows:

<!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>JS实现双击编辑可修改状态</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<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 &#63; 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)">我闪故我在</dd>
</dl>
</body>
</html>

I hope this article will be helpful to everyone’s JavaScript programming design.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery realizes the effect of switching pictures in and out_jqueryNext article：jQuery realizes the effect of switching pictures in and out_jquery

See more

JS method to implement double-click editing to modify the state_javascript skills

Related articles