網站首頁 健康小知識 母嬰教育 起名 運動知識 職場理財 情感生活 綠色生活 遊戲數碼 美容 特色美食 愛好

html如何設置標籤input文本框為只讀?

欄目: 互聯網 / 發佈於: / 人氣:1.85W

html中的input用處很廣泛,尤其是當我們在網頁開發中需要用到表單的時候。這裏我們看看有哪些方法讓input標籤不可編輯。

html如何設置標籤input文本框為只讀?

操作方法

(01)我們創建一個html5頁面,添加如下圖所示input標籤。創建過程我就不説了,Ctrl+n即可,這裏我們創建的是H5的頁面,當然,h4的也行。

(02)然後我們在Dreamweaver中切換為實時視圖。右側頁面預覽中的標籤input中,我們可以看到,鼠標光標還是可以在上面進行編輯的。

html如何設置標籤input文本框為只讀? 第2張

(03)接下來我們把鼠標光標放到input標籤代碼中間即可,然後就可以看到Dreamweaver下方出現input標籤的屬性編輯選項了。如下圖,我們把只讀勾選即可。然後我們就可以看到input標籤代碼裏面出現了一個readonly,這裏我們也可以直接添加這個屬性到代碼中的。這時候,我們再看,input輸入框已經不能輸入了。

html如何設置標籤input文本框為只讀? 第3張
html如何設置標籤input文本框為只讀? 第4張

(04)然後我們再看看另一種方式,就是把input設置為禁用,和剛才的只讀一樣,我們勾選禁用即可,如下圖,input輸入框不能進行輸入了。

html如何設置標籤input文本框為只讀? 第5張
html如何設置標籤input文本框為只讀? 第6張

(05)第三種方式,我們還可以設置輸入框的焦點事件,如下圖,把焦點事件設置成鼠標模糊動作,就可以讓輸入框獲取不到焦點了,自然就無法編輯了。

html如何設置標籤input文本框為只讀? 第7張

(06)最後,我們把整體的幾個方法放到一起看看。如下圖。

html如何設置標籤input文本框為只讀? 第8張

特別提示

input輸入框只讀屬性根據需要按不同方法設置