如何禁用HTML输入元素的选择/突出显示

Question

如何防止用户选择/突出显示<input>？

此：

input { 
user-select: none;
}

<input type="number" value="123" />

以及How to disable text selection highlighting和CSS disable text select and not work on a CCD_。

注意：如果可能的话，我不想将input置于disabled模式。

Answer 1

您可以像这样隐藏选择：

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

如果用户在选择文本后拖动文本，这种错觉就会被打破，但我认为没有其他方法可以做到

(你为什么要这么做(？

Answer 2

当有人用.getSelection().removeAllRanges();在输入元素中选择某个内容时，您可以尝试(几乎立即(删除该选择。

如果有人动作敏捷，仍然可以复制文本。

$("input").select(function() {
window.getSelection().removeAllRanges();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" value="123">

您可以通过使文本看起来不可选择来改进这一点(请参阅Samuel的回答(，我将其添加到一个额外的代码片段中：

$("input").select(function() {
window.getSelection().removeAllRanges();
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" value="123">

在所有这些之后，您还可以通过将onCopy="return false"添加到输入字段中，让用户不可能复制输入字段中的任何内容。(它仍然可以选择，但不可能复制(。

<input type="number" value="123" onselectstart="return false" oncopy="return false;" />

您可能只想在项目中使用1个或其中2个的组合。将您需要的东西组合起来，就可以创建一个不可选择/不可复制的输入字段。

您也可以根据本文禁用剪切/粘贴或右键单击。

Answer 3

阅读您的需求，您可能会通过完全不使用面向用户的数字输入来最好地满足它们，或者更准确地说，逐步增强到某种程度；股票代码"；结构

这种逐渐增强的数字输入没有选择值的可能性，可能类似于：

<form onsubmit="alert('Value is: ' + this.v.value); return false">
<label for="o">Value: </label>
<!-- Displays the value: -->
<output id="o" for="plus minus"
style="min-width: 2em;
display: inline-block;
text-align: right; border: 1px solid;
padding-inline: .5em;
user-select: none;
/* user-select: none; is probably not necessary here anymore
since keyboard input here does not affect the value
*/
">0</output>
<!-- Holds actual value: -->
<input name="v" type="hidden" value="0" onchange="o.value=value">
<!-- Controls: -->
<button id="plus" type="button" aria-label="Increase value"
onclick="v.value=Number(v.value)+1;v.onchange()"
>+</button>
<button id="minus" type="button" aria-label="Decrease value"
onclick="v.value=Number(v.value)-1;v.onchange()"
>-</button>
<hr>
<input type="submit">
</form>

(同样，此结构仅用于演示，底层元素应为常规数字输入。两者都应与屏幕阅读器和其他辅助技术配合使用，但尚未验证此ATM。(

Answer 4

作为第一个近似值，这似乎有效：

input { 
pointer-events: none;
}

<input type="number" value="123" />

Answer 5

如果您仍然需要指针事件，则此操作有效：

香草

<style>
input::selection {
background-color: transparent;
}
</style>
<input 
type="number"
oncopy="return false"
oncut="return false"
onpaste="return false"
/>

使用样式化组件进行反应

import styled from 'styled-components';
const ScInput = styled.input`
&::selection {
background-color: transparent;
}
`;
const Input = () => (
<Input
onCopy={(e) => e.preventDefault()}
onCut={(e) => e.preventDefault()}
onPaste={(e) => e.preventDefault()}
/>
);
export default Input;

禁用输入的复制/剪切/粘贴功能，并使选择透明。