HTML中讓表單input等文本框為只讀不可編輯的方法
發(fā)布時間：2012-09-23 22:18:03 作者：佚名 
我要評論
我要評論有時候，我們希望表單中的文本框是只讀的，讓用戶不能修改其中的信息，如使input text的內容，中國兩個字不可以修改
有時候，我們希望表單中的文本框是只讀的，讓用戶不能修改其中的信息，如使<input type="text" name="input1" value="中國"> 的內容，"中國"兩個字不可以修改。實現的方式歸納一下，有如下幾種。
方法1: onfocus=this.blur() 當鼠標放不上就離開焦點
<input type="text" name="input1" value="中國" onfocus=this.blur()>
方法2:readonly
<input type="text" name="input1" value="中國" readonly>
<input type="text" name="input1" value="中國" readonly="true">
方法3: disabled
<input type="text" name="input1" value="中國" disabled="true">
完整的例子:
<input name="ly_qq" type="text" tabindex="2" onMouseOver="this.className='input_1'" onMouseOut="this.className='input_2'" value="123456789" disabled="true" readOnly="true" />
disabled="true" 此果文字會變成灰色，不可編輯。
readOnly="true" 文字不會變色，也是不可編輯的
css屏蔽輸入：<input style="ime-mode: disabled">
有兩種方法第一：disabled="disabled"這樣定義之后被禁用的 input 元素既不可用，也不可點擊。第二：readonly="readonly" 只讀字段是不能修改的。不過，用戶仍然可以使用 tab 鍵切換到該字段，還可以選中或拷貝其文本；
方法1: onfocus=this.blur() 當鼠標放不上就離開焦點
<input type="text" name="input1" value="中國" onfocus=this.blur()>
方法2:readonly
<input type="text" name="input1" value="中國" readonly>
<input type="text" name="input1" value="中國" readonly="true">
方法3: disabled
<input type="text" name="input1" value="中國" disabled="true">
完整的例子:
<input name="ly_qq" type="text" tabindex="2" onMouseOver="this.className='input_1'" onMouseOut="this.className='input_2'" value="123456789" disabled="true" readOnly="true" />
disabled="true" 此果文字會變成灰色，不可編輯。
readOnly="true" 文字不會變色，也是不可編輯的
css屏蔽輸入：<input style="ime-mode: disabled">
有兩種方法第一：disabled="disabled"這樣定義之后被禁用的 input 元素既不可用，也不可點擊。第二：readonly="readonly" 只讀字段是不能修改的。不過，用戶仍然可以使用 tab 鍵切換到該字段，還可以選中或拷貝其文本；
相關文章
- 本文主要介紹了限制html文本框input只能輸入數字和小數點的方法。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-27
html5+jQuery實現的點擊text文本框個性化時間選擇插件源碼
這是一款基于html5+jQuery實現的點擊text文本框個性化時間選擇插件源碼。點擊text文本框即可彈出一個環(huán)形顯示的時間選擇框，拖動環(huán)上的時間刻度即可動態(tài)改變現實時間2016-06-17- 這篇主要介紹HTML帶表情的評論框，表情通過Json數據加載，可以根據自己的喜好改變表情。本評論框代碼為HTML，CSS，JQ三個方面的代碼，html的代碼還是比較簡單的，大家可以2014-11-05
- 實現文本框出現提示的效果有很多方法，可以用html5中的屬性實現，也可以用js做到加css樣式，具體的實現過程如下2014-07-29
- 這篇文章主要介紹了html代碼文本框限制輸入、文本框變灰色、限制文本框輸入,需要的朋友可以參考下2014-06-28
- textarea 用來創(chuàng)建一個可以輸入多行的文本框，此標志對用于form標志對之間,他還支持一些事件的處理2014-06-28
- 當定義了 Text 的 height 屬性時，在 Text 中輸入的文字都不是垂直居中的，不過可以通過css來控制它，下面有個不錯的示例，大家可以參考下2014-02-18
- 有時候，我們希望表單中的文本框是只讀的，讓用戶不能修改其中的信息，本文整理了多種實現方法，感興趣的朋友可以參考下2013-11-29
HTML5實現又一個聯系人表單文本框響應鼠標事件效果(無js)
無需任何js腳本即可實現文本框默認內容點擊后清空的效果，鼠標離開，恢復默認值2013-04-27- 本文通過實例代碼給大家介紹了 HTML實現文本框只讀不能修改其中的內容的方法，需要的朋友參考下吧2017-09-06
