JS實作雙擊編輯可修改狀態的方法_javascript技巧
本文實例講述了JS實作雙擊編輯可修改狀態的方法。分享給大家供大家參考。具體如下：
這是現在流行的一個表單特效，在網頁上點擊某文字，文字變成編輯狀態，或者是讓輸入新文字，這就是JavaScript控製表單的一個例子，下面的這段程式碼就實現了使用者名稱和簽名檔的雙擊可編輯功能。
運作效果如下圖：
線上示範網址如下：
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实现双击编辑可修改状态</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 ? 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>希望本文所述對大家的javascript程式設計有所幫助。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
釘釘怎麼修改群組裡的個人名稱_釘釘修改群組個人名稱方法
Mar 29, 2024 pm 08:41 PM
1.首先打開釘釘。 2.打開群組聊，點選右上角的三個點。 3.找到我在本群的暱稱。 4.點選進入即可修改儲存。
建議：優秀JS開源人臉偵測辨識項目
Apr 03, 2024 am 11:55 AM
人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬，在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別，大大縮短了使用者等待時間，提高了使用者體驗；弱勢是：受到模型大小限制，其中準確率也有限。如何在web端使用js實現人臉偵測呢？為了實現Web端人臉識別，需要熟悉相關的程式語言和技術，如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是，由於Web端的計
騰訊文檔怎麼編輯文檔？ -騰訊文件編輯文件教學攻略
Mar 19, 2024 am 08:19 AM
大家知道怎麼在騰訊文檔中編輯文檔嗎?不知道沒關係，小編今天介紹如何在騰訊文檔中編輯文檔的詳細圖文講解，希望可以幫助到你哦。騰訊文檔中編輯文檔的詳細圖文講解1、首先直接進入騰訊文檔(沒有的小伙伴趕緊下載哦!)，直接登錄(支持QQ、TIM兩種登錄方式)2、登錄後直接點擊右上角的加號，直接建立線上文件以及線上表格、新資料夾等!3、然後根據自己的需求輸入資訊就可以啦!
抖音藍V可以改名字嗎？企業抖音藍V號名稱修改步驟有哪些？
Mar 22, 2024 pm 12:51 PM
抖音藍V認證是企業或品牌在抖音平台上的官方認證，有助於提升品牌形象和可信度。隨著企業發展策略的調整或品牌形象的更新，企業可能希望更改抖音藍V認證的名字。那麼，抖音藍V可以改名字嗎？答案是可以的。本文將詳細介紹企業抖音藍V號名稱修改的步驟。一、抖音藍V可以改名字嗎？抖音藍V帳號是可以改名字的。根據抖音官方規定，企業藍V認證帳號在滿足一定條件後，可以申請修改帳號名稱。一般來說，企業需要提供相關的證明資料，如營業執照、組織機構代碼證等，以證明修改名稱的合法性和必要性。二、企業抖音藍V號名稱修改步驟有哪
閒魚怎麼修改已發布商品地址位置
Mar 28, 2024 pm 03:36 PM
在閒魚平台發布商品時，用戶可以根據實際情況自訂設定寶貝的地理位置信息，這樣潛在買家就能更精準地掌握商品的具體所在地。一旦商品成功上架，若賣家的地理位置有所變動，也無需擔憂。閒魚平台特別提供了靈活且便捷的修改功能，那麼當我們想要修改已經發布產品的地址究竟該如何修改呢，這篇教程攻略就將為大家帶來詳細的步驟攻略介紹，希望能幫助到大家！閒魚怎麼修改發布產品地址？ 1.打開閒魚，點擊我發布的，選擇商品，點擊編輯。 2、點選定位圖標，選擇需要設定的地址即可。
word文檔不能編輯怎麼辦
Mar 19, 2024 pm 09:37 PM
編輯完文檔以後我們會保存文檔，為下次編輯修改文檔提供方便，有時我們點開編輯好的文檔以後能直接進行修改，但有時不知道為什麼，怎麼點擊word文檔都沒有反應，不執行命令了，word文檔不能編輯怎麼辦呢？大家不用急，小編幫你解決這個困擾，大家一起來看看操作過程。開啟Word文件後，編輯文字時會看到頁面右側顯示「限制編輯」的提示，如下圖所示。 2、需要解除編輯，需要知道設定密碼，點擊彈出的提示下方的“停止保護”，如下圖所示。 3、然後頁面彈出「取消保護文件」對話方塊中輸入密碼，點選確定，如下圖所示
Win10睡眠時間修改技巧大揭秘
Mar 08, 2024 pm 06:39 PM
Win10睡眠時間修改技巧大揭密作為目前廣泛使用的作業系統之一，Windows10擁有睡眠功能，幫助使用者在不使用電腦時節省電力並保護螢幕。然而，有時候預設的睡眠時間並不符合使用者的需求，因此了解如何修改Win10睡眠時間就顯得格外重要。本文將揭示Win10睡眠時間修改的技巧，讓您輕鬆自訂系統的睡眠設定。一、透過「設定」修改Win10睡眠時間首先，最簡單的修
魅族21pro怎麼設定雙擊鎖定畫面？
Mar 18, 2024 pm 04:10 PM
魅族21Pro其作業系統Flyme也提供了豐富的個人化設定選項，讓使用者可以根據自己的喜好和習慣進行自訂。其中，雙擊鎖定螢幕功能是一項非常實用的設置，能夠讓使用者快速鎖定螢幕，並保護手機安全。接下來，我們將介紹如何在魅族21Pro上設定雙擊鎖定螢幕功能，讓您的手機使用更加便利。魅族21pro怎麼設定雙擊鎖定畫面1、進入【設定】-【輔助功能】-【手勢喚醒】，點選【手勢喚醒】右側開關，即可控制黑畫面手勢功能的開啟或關閉。 2.在系統桌面-設定-指紋與安全，設定鎖定螢幕密碼或是錄入指紋即可，如果沒有指紋解鎖的功能，設定-安全，
