第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

跨瀏覽器:禁用輸入字段的行為不同(文本可以/不能復(fù)制)

跨瀏覽器:禁用輸入字段的行為不同(文本可以/不能復(fù)制)

慕哥6287543 2021-05-13 18:17:43
我有一個(gè)禁用的輸入html字段。在某些瀏覽器(Chrome,Edge,Internet Explorer和Opera)中,可以選擇和復(fù)制文本,但是至少在Firefox中是不可能的。您可以通過(guò)在不同的瀏覽器中執(zhí)行以下代碼來(lái)對(duì)其進(jìn)行測(cè)試:<input type="text" disabled value="is disable">  <input type="text" readonly value="is readonly">我讀在這里該禁用字段可以是焦點(diǎn),這里其被禁用的輸入元件是不可用的和未可點(diǎn)擊和在這里的是一個(gè)只讀輸入字段不能被修改(然而,用戶可以標(biāo)簽給它,突出顯示它,并從中復(fù)制文本)。我沒(méi)有發(fā)現(xiàn)任何內(nèi)容表明不能復(fù)制來(lái)自禁用輸入的文本。這是一種標(biāo)準(zhǔn)行為,某些瀏覽器不遵守該行為,或者瀏覽器可以選擇是否禁用禁用輸入中的文本?有一種解決方案允許在所有瀏覽器中復(fù)制來(lái)自禁用輸入字段的文本?注意:我的應(yīng)用程序是使用Angular / TypeScript語(yǔ)言實(shí)現(xiàn)的。它表明唯一具有獨(dú)特行為的瀏覽器是firefox。我在這里打開(kāi)一個(gè)問(wèn)題,試圖了解是設(shè)計(jì)選項(xiàng)還是錯(cuò)誤。我正在等待答案。
查看完整描述

3 回答

?
qq_遁去的一_1

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">


查看完整回答
反對(duì) 回復(fù) 2021-05-20
?
繁花不似錦

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>


查看完整回答
反對(duì) 回復(fù) 2021-05-20
?
瀟湘沐

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之間相互作用的好方法。


查看完整回答
反對(duì) 回復(fù) 2021-05-20
  • 3 回答
  • 0 關(guān)注
  • 149 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)