javascript - HTML フォーム フィールドでテキストのハイライトを停止する方法

Question

Google でしばらく過ごした後、解決策を得るためにここに来ました。私がしなければならないことは、ユーザーがカーソルを使用して選択したときに、入力フィールド (HTML フォーム フィールド) のテキストの強調表示を停止することです。ユーザーが入力フィールド内のテキストの全体または一部を選択しようとすると、カーソルは、ユーザーがマウスの左クリックを開始したインデックスで停止する必要があります。このようなもの

これはすべきではありません

これは

ユーザーは、ユーザーが望む任意のインデックスにカーソルを配置できる必要がありますが、テキストを強調表示できないようにする必要があります。私は CSS の専門家ではありません。これに対する解決策はありますか？JS ソリューションは、setSelectionRange または createTextRange の使用になります。

最高のCSSまたはJSソリューションをお願いします。

Answer 1

ハイライトを停止できないことを願っています。代わりに、ハイライトの背景色をテキストフィールドの背景色に変更するトリックを適用できます。

背景色が同じ場合、強調表示されません。ここでは、同じことを実現するコードを示します:-

jsfiddle でデモを表示します。

CSS

input::selection {
background: #fff; 
}
input::-moz-selection {
background: #fff; /* Firefox lower versions */
}