表格顯示文本內容，當用鼠標點擊時獲取到焦點文本變為可輸入的輸入框，點擊空白處時失去焦點變為文本顯示的文本內容

先看效果圖
失去焦點的時候（文本內容只能看不能編輯）

獲取焦點的時候（文本內容變為可以編輯的輸入框）

程序解讀：
獲取和失去焦點決定了內容能否編輯
焦點的變化是文本框和輸入框的切換過程
把輸入框的內容傳輸給文本框失去焦點時顯示

下面看代碼

特別注意：一定要添加Jquery.js文件并進行引入

Jquery.js的引入（放在head中）

<script src="jquery.js"></script>

Body代碼

<table><tr><td><div>001</div><input type="text" /></td><td>張三</td></tr><tr><td><div>001</div><input type="text" /></td><td>張三</td></tr><tr><td><div>001</div><input type="text" /></td><td>張三</td></tr> </table>

CSS代碼

table,table td{border: 1px solid #ccc;border-collapse: collapse;}td{width: 150px;height: 30px;}input{border: 0px;height: 26px;display: none;}div{height: 30px;width: 100%;line-height: 30px;}

Script代碼

$(function(){$("div").on("click",function(){$(this).next(":input").show().focus();$(this).hide();$(":input").val($(this).text());});$(":input").blur(function(){$(this).hide();$(this).prev("div").show();$(this).prev("div").text($(this).val());});});

上述代碼已經能完美實現焦點的失去和獲取效果了！！！

總結

以上是生活随笔為你收集整理的获取焦点改变状态的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。