HTML中設定輸入框為唯讀狀態的方法

2021-06-08 00:50:32 字數 762 閱讀 8826

在設計網頁的時候,有時候我們需要將輸入框設定為唯讀狀態,即其中的內容不可編輯,實現這種設計的方法有兩種,分別是使用input的disable和readonly兩個屬性,不過他們之前還是有一些區別的。

type= "text "   readonly= "true "   value= "這是readonly的! ">

type= "text "   disabled= "true "   value= "這是disabled的! ">

可以看到,雖然兩種都是讓input的內容不能被使用者編輯,但是對於後期的美工處理就有問題了!

比如:這樣一來:

只有readonly的那個文字是藍色的!

disabled是按系統設定的disabled顏色來設定前景色的,css對其無效!

另外,readonly和disabled還有乙個不同點就是,當input屬性為readonly時,提交表單是可以獲得input的內容,但是如果是disabled則不能獲得所提交的內容,返回值全部為null,所以此處需要注意。要慎用readonly和disabled, 指定了disabled的表單,在submit時,不會把它的值傳出去, 如下所示,有兩個text,乙個是readonly乙個是disabled,submit後,只能傳送那個不是disabled的,注意位址列的值. 要儲存到本地,因為submit了,不然,看不到效果.

唯讀是可以讀取其文字內容的但不能編輯和輸入" readonly size="100">

文字變灰不能讀取其文字內容也不能編輯和輸入" disabled size="100">

Html為輸入框新增限制

1.取消按鈕按下時的虛線框 在input裡新增屬性值 hidefocus 或者 hidefocus true 2.唯讀文字框內容 在input裡新增屬性值 readonly 3.防止退後清空的text文件 可把style內容做做為類引用 4.enter鍵可以讓游標移到下乙個輸入框 5.只能為中文 有...

輸入框設定為不可修改

方法1 nf cus this.blur 方法2 readonly 方法3 disabled readonly disabled autocomplete readonly表示此域的值不可修改,僅可與 type text 配合使用,可複製,可選擇,可以接收焦點,後台會接收到傳值.disabled表示...

html輸入框輸入限制

js判斷只能是數字和小數點 1.文字框只能輸入數字 小數點也不能輸入 2.只能輸入數字,能輸小數點.3.數字和小數點方法二 4.只能輸入字母和漢字 5.只能輸入英文本母和數字,不能輸入中文 6.只能輸入數字和英文chun 7.小數點後只能有最多兩位 數字,中文都可輸入 不能輸入字母和運算符號 57 ...