一個常見的問題是，當您使用JQuery或JavaScript動態(tài)生成表單時，如何將表單輸入字段（input）設置為不可編輯？

在JQuery中，可以使用attr（）或prop（）方法設置元素時的“readonly”屬性，這兩個方法的用法非常相似。

//使用attr（）方法設置元素的“readonly”屬性
$("#input-id").attr("readonly", true);
//使用prop（）方法設置元素的“readonly”屬性
$("#input-id").prop("readonly", true);

與“readonly”屬性不同的是，“disabled”屬性不僅禁用輸入，而且還禁用提交。如果您只希望禁用輸入，而不禁用提交，請使用“readonly”屬性。

另一個常見的問題是如何使用戶點擊輸入字段時，不會彈出虛擬鍵盤（例如在Kiosk或公共計算機上）。在移動設備上，使用“readonly”屬性可以達到此目的。但是，在桌面瀏覽器上，虛擬鍵盤在單擊“readonly”字段時仍然會出現(xiàn)。因此，需要結合一些CSS技巧，使該字段看起來像只讀字段，并且不會觸發(fā)虛擬鍵盤的顯示。以下是一些CSS示例：

/*將“cursor”屬性設置為“default”可以隱藏光標*/
#input-id {
cursor: default;
}
/*使用“text-indent”將可編輯文本向左縮進/突出*/
#input-id[readonly] {
background-color: white; /*使只讀文本背景與頁面背景相同*/
text-indent: -9999px;
}
/*使用“user-select”設置禁用選區(qū), 防止用戶通過復制粘貼造成惡意攻擊*/
#input-id[readonly]::selection {
background-color: transparent;
color: transparent;
}