JS實(shí)現(xiàn)雙擊編輯可修改狀態(tài)的方法
更新時間：2015年08月14日 11:56:13 作者：企鵝
這篇文章主要介紹了JS實(shí)現(xiàn)雙擊編輯可修改狀態(tài)的方法,涉及javascript針對頁面元素的動態(tài)創(chuàng)建及設(shè)置技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實(shí)例講述了JS實(shí)現(xiàn)雙擊編輯可修改狀態(tài)的方法。分享給大家供大家參考。具體如下：
這是現(xiàn)在流行的一個表單特效，在網(wǎng)頁上單擊某文字，文字變?yōu)榫庉嫚顟B(tài)，或者是讓輸入新文字，這就是JavaScript控制表單的一個例子，下面的這段代碼就實(shí)現(xiàn)了用戶名和簽名檔的雙擊可編輯功能。
運(yùn)行效果如下圖所示：
在線演示地址如下：
http://demo.jb51.net/js/2015/js-double-click-edit-style-codes/
具體代碼如下：
<!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實(shí)現(xiàn)雙擊編輯可修改狀態(tài)</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');
//創(chuàng)建新的input元素
newobj.type = 'text';
//為新增元素添加類型
newobj.onblur = function(){
element.innerHTML = this.value ? this.value : oldhtml;
//當(dāng)觸發(fā)時判斷新增元素值是否為空，為空則不修改，并返回原有值
}
element.innerHTML = '';
element.appendChild(newobj);
newobj.focus();
}
</script>
</head>
<body>
<dl>
<dt>你的用戶名:</dt>
<dd ondblclick="ShowElement(this)">三人行團(tuán)隊(duì)</dd>
<dt>你的個性檔</dt>
<dd ondblclick="ShowElement(this)">我閃故我在</dd>
</dl>
</body>
</html>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
基于Javascript實(shí)現(xiàn)返回頂部按鈕
這篇文章主要為大家詳細(xì)介紹了基于Javascript實(shí)現(xiàn)返回頂部按鈕，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-02-02
uniapp自定義頁面跳轉(zhuǎn)loading的實(shí)現(xiàn)代碼
有些頁面加載起來比較慢,為了加強(qiáng)用戶體驗(yàn)效果,所以一般都會做一個頁面加載等待的提示,頁面加載完成后消失,下面這篇文章主要給大家介紹了關(guān)于uniapp自定義頁面跳轉(zhuǎn)loading的實(shí)現(xiàn)代碼,需要的朋友可以參考下2023-06-06
這篇文章主要幫助大家更好的理解js回收機(jī)制，通俗易懂，便于大家理解，感興趣的小伙伴們可以參考一下2016-02-02
基于JavaScript實(shí)現(xiàn)多級菜單效果
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)多級菜單效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了javascript 單例模式詳解及簡單實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-02-02
基于javascript實(shí)現(xiàn)貪吃蛇經(jīng)典小游戲
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)貪吃蛇小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
JavaScript中實(shí)現(xiàn)map功能代碼分享
這篇文章主要介紹了JavaScript中實(shí)現(xiàn)map功能代碼分享,本文直接給出實(shí)現(xiàn)代碼,給出一個MAP類,類中包含大多數(shù)的常用方法,還可以自己擴(kuò)展,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了js實(shí)現(xiàn)日期比較相關(guān)天數(shù)的方法,需要的朋友可以參考下2014-04-04
bootstrap導(dǎo)航欄、下拉菜單、表單的簡單應(yīng)用實(shí)例解析
這篇文章主要介紹了bootstrap導(dǎo)航欄、下拉菜單、表單的簡單應(yīng)用實(shí)例解析,非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-01-01
這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)信息滾動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05