禁用文本區域中的文本選擇

Question

我需要找到一種方法來防止用戶在文本區域中選擇文本。 目標是創建一個自定義鍵盤，用於在文本區域中輸入文本。 我希望用戶能夠單擊文本區域以設置插入符號 position（現在已經可以使用）。 但是，我不希望用戶能夠 select 插入文本的某些部分，或者至少應該沒有視覺指示。 我已經嘗試了一些東西，例如下面的 CSS，但沒有成功。

textarea {
    -moz-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}

解決方案可以在 CSS 和/或 JavaScript 中，並且它只需要在 Google Chrome 中工作。

---

禁用文本區域對我不起作用。 正如我所提到的，我希望用戶能夠通過單擊位置將插入符號放置在特定位置。 如果我禁用文本區域，此功能將丟失。

Answer 1

“只讀”屬性和“用戶選擇”屬性的組合有效。

第二條規則禁用select上突出顯示的邊框，這是一種視覺選擇。

“不可選擇的”屬性似乎是Opera / IE特有的。

風格：

.noselect {
   cursor: default;
   -webkit-user-select: none;
   -webkit-touch-callout: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   -o-user-select: none;
}

.noselect:focus {
   outline: none;
}

標記：

<textarea class="noselect" readonly="readonly" unselectable="on"></textarea>

只讀可能比禁用更合適（在點擊事件時，仍可以使用JS切換）。

Answer 2

<textarea unselectable="on" id="my_textarea"></textarea>

    *.unselectable {
   -webkit-user-select: none;
    }  

Answer 3

下面的代碼可以幫助您

JS代碼：

$(document).ready(function(){
   $('#txtInput').bind("cut copy paste",function(e) {
      e.preventDefault();
   });
});

Answer 4

這些解決方案都不適合我。 這是我自己的一個：

textarea::selection {
    background-color: transparent;
}

---

如果這有幫助，請告訴我。

謝謝

Answer 5

答案對我不起作用，所以我把一個 div 放在position: absolute; 在文本區域的頂部，它工作得很好。

Answer 6

或者您可以在textarea中放置disabled =“disabled”，如下所示：

<textarea disabled="disabled"></textarea>

Answer 7

你可以用javascript禁用它：

document.getElementById("textarea").disable='true';

Answer 8

<textarea disabled="readonly"></textarea>

測試它是否正常工作。