css 禁用文本区域中的文本选择

brqmpdu1  于 2022-11-26  发布在  其他
关注(0)|答案(8)|浏览(231)

我需要找到一种方法来防止用户在文本区域中选择文本。目标是创建一个自定义键盘,用于在文本区域中输入文本。我希望用户能够单击文本区域来设置插入符号的位置(现在已经可以使用了)。但是,我不希望用户能够选择插入文本的某些部分,或者至少应该没有这方面的视觉指示。我已经尝试了一些事情,比如下面的CSS,但是没有成功。

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

解决方案可以是CSS和/或JavaScript,它只需要在Google Chrome中工作。
禁用文本区域对我来说不起作用。正如我提到的,我希望用户能够通过单击位置将插入符号放置在特定位置。如果我禁用文本区域,此功能将丢失。

baubqpgj

baubqpgj1#

“readonly”属性和“user-select”属性的组合有效。
第二个规则禁用选择时突出显示的边框,这是一种可视选择。
“unselectable”属性似乎是特定于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切换)。

mbyulnm0

mbyulnm02#

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

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

inkz8wg93#

这些解决方案对我都不起作用。下面是我自己的一个:

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

ttisahbt4#

下面的代码可以帮助您
JS代码:

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

c6ubokkw5#

或者,您可以在textarea中输入disabled=“disabled”,如下所示:
<textarea disabled="disabled"></textarea>

oyxsuwqo

oyxsuwqo6#

答案对我不起作用,所以我在textarea上放了一个带有position: absolute;的div,它工作得很好。

bpzcxfmw

bpzcxfmw7#

您可以使用javascript禁用它:

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

8nuwlpux8#

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

测试它是否工作正常。

相关问题