3 回答

TA貢獻(xiàn)1725條經(jīng)驗(yàn) 獲得超8個(gè)贊
將您的字段從更改disabled為readonly。這是您想要的行為的正確屬性。
不要浪費(fèi)時(shí)間一起破解javascript解決方案,因?yàn)樗葹g覽器行為上的細(xì)微差別還要脆弱。
如果問(wèn)題是您希望只讀字段看起來(lái)像已禁用字段,則使用readonly屬性集設(shè)置輸入的樣式相當(dāng)容易。您無(wú)需更改行為即可更改外觀。
input[readonly] {
background: #EEE;
color: #666;
border: solid 1px #CCC;
}
<input readonly value="I am readonly">

TA貢獻(xiàn)1851條經(jīng)驗(yàn) 獲得超4個(gè)贊
我嘗試user-select在輸入中使用,但是它不能阻止選擇文本。即使div使用某種user-select: none樣式將其包裝為仍然無(wú)法正常工作。它僅適用于(我認(rèn)為)不可聚焦的元素,例如div,span等。
但是,現(xiàn)在,我認(rèn)為user-select: none如果要確保即使在許多不同的瀏覽器中用戶也不會(huì)從頁(yè)面復(fù)制文本(檢查用戶選擇的瀏覽器的兼容性),則這是唯一更好的選擇。因此,我建議創(chuàng)建一個(gè)類似于以下內(nèi)容的組件:
<input *ngIf="!isDisabled" value="model" />
<div *ngIf="isDisabled" style="user-select: none">{{model}}</div>

TA貢獻(xiàn)1816條經(jīng)驗(yàn) 獲得超6個(gè)贊
禁用表單控件時(shí),這樣做沒(méi)有任何問(wèn)題。
<input type="text" disabled readonly value="is disable">
或者
<input type="text" disabled="disabled" readonly="readonly" value="is disable">
但是,這可能不會(huì)產(chǎn)生一致的行為,因?yàn)樗c復(fù)制文本有關(guān)(選擇后)。
不完美的JavaScript方式:
我已經(jīng)有select一段時(shí)間沒(méi)有使用類型事件了,但是我建議切換選擇文本的功能。您可能還會(huì)玩focus和blur事件。
外部CSS樣式表:
.preventSelection {user-select: none} // IE 10+
W3Schools:用戶選擇:
快速和骯臟的事件處理程序:
function preventDisabledControlTextCopy(e)
{
// blah, blah, blah
if (e.target.disabled === true) {
// Add "preventSelection" to e.target.className
// Alternatively, change the focus to somewhere else!
} else {
// Remove "preventSelection" from e.target.className
}
}
// Blah, blah, blah-blah blah
textBox.addEventListener("select", preventDisabledControlTextCopy, false);
尋找選擇永遠(yuǎn)不會(huì)浪費(fèi)時(shí)間。我跳過(guò)了許多細(xì)節(jié),但是我把重要的部分明確了(因?yàn)镾tackoverflow是人們用來(lái)學(xué)習(xí)事物的工具)。具體實(shí)施取決于您。
最后的想法:
最佳答案可能是使用CSS和JavaScript并切換visibility: hidden(IE 4+)或display: none(IE 8+),具體取決于您的方案,DOM結(jié)構(gòu)和您能夠管理的復(fù)雜性。
動(dòng)態(tài)表單是體驗(yàn)HTML,CSS和JavaScript之間相互作用的好方法。
添加回答
舉報(bào)