讓html標(biāo)簽不可編輯的兩種方法：1、給標(biāo)簽設(shè)置disabled屬性，它是一個(gè)布爾屬性，規(guī)定應(yīng)該禁用元素；設(shè)置來該屬性的元素不可編輯，無法使用和無法點(diǎn)擊的。2、給標(biāo)簽設(shè)置readonly屬性，它是一個(gè)布爾屬性，規(guī)定元素是只讀的，這意味著用戶不能修改或更改特定元素中已經(jīng)存在的內(nèi)容。

前端（vue）入門到精通課程：進(jìn)入學(xué)習(xí)
API 文檔、設(shè)計(jì)、調(diào)試、自動化測試一體化協(xié)作工具：點(diǎn)擊使用

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

讓html標(biāo)簽不可編輯的兩種方法

方法1、給標(biāo)簽設(shè)置disabled屬性

disabled 屬性是一個(gè)布爾屬性，該屬性規(guī)定應(yīng)該禁用的 <input> 元素，同時(shí)被禁用的 input 元素是無法使用和無法點(diǎn)擊的。

disabled 屬性進(jìn)行設(shè)置，使用戶在滿足某些條件時(shí)（比如選中復(fù)選框，等等）才能使用 <input> 元素。然后，可使用 JavaScript 來刪除 disabled 值，使該<input> 元素變?yōu)榭捎玫臓顟B(tài)。

提示：表單中被禁用的 <input> 元素不會被提交。

注意：disabled 屬性不適用于 <input type="hidden">。

代碼示例：

<input type="text" name="input1" value="php中文網(wǎng)" disabled>

方法2、給標(biāo)簽設(shè)置readonly屬性

readonly屬性是一個(gè)布爾屬性，可用于指定在input或textarea元素中寫入的文本是只讀的。這意味著用戶不能修改或更改特定元素中已經(jīng)存在的內(nèi)容（但是，用戶可以對其進(jìn)行制表、突出顯示和復(fù)制文本）。而JavaScript可以用來更改只讀值并使輸入字段可編輯。

<input type="text" name="input1" value="php中文網(wǎng)"><br><br> <input type="text" name="input1" value="php中文網(wǎng)" readonly>

說明：

readonly屬性和disabled 屬性都是表單字段（文本框，標(biāo)簽，復(fù)選框，文本區(qū)域）的不可編輯屬性，下面我們來看看它們的區(qū)別

disabled 屬性—-禁用屬性

1、禁用的表單字段或元素值不會發(fā)布到服務(wù)器進(jìn)行處理。

2、禁用的表單字段或元素不會獲得焦點(diǎn)。

3、選項(xiàng)卡導(dǎo)航時(shí)會跳過已禁用的表單字段或元素。

4、某些瀏覽器（如IE）為禁用的表單字段或元素提供默認(rèn)樣式（灰色或浮雕文本）。

readonly屬性—-只讀屬性

1、字段或元素的值以只讀形式來發(fā)布到服務(wù)器進(jìn)行處理。

2、只讀表單字段或元素可以獲得焦點(diǎn)。

3、選項(xiàng)卡導(dǎo)航時(shí)包含只讀表單字段或元素。

4、某些瀏覽器不為只讀表單字段或元素提供默認(rèn)樣式。

（學(xué)習(xí)視頻分享：web前端）