我们可以将插入符号隐藏在数字字段中而不禁用它吗答案

【问题标题】：Can we hide the caret in a number field without disabling it我们可以将插入符号隐藏在数字字段中而不禁用它吗
【发布时间】：2013-01-29 10:21:48
【问题描述】：

我有一个 微调器 - 不是文本字段或文本区域

<input type="number" />

如果单击控件时字段中没有闪烁的插入符号会很好。

当然不起作用，因为当字段被禁用或只读时微调器不会运行。

jQuery UI spinner也有同样的问题

【问题讨论】：

您希望克拉（光标？）在什么情况下不闪烁？
当控件获得焦点时。
我认为你必须忍受它。对于type="number"，focus/spinner/blink 都作为一个包提供。你可以试试type="text" 和pattern="[0-9]*" 但我想你会遇到同样的问题。
我想要微调器，所以 type=text 不是一个选项
这有点麻烦，但你可以试试here描述的技术。

标签： jquery html

【解决方案1】：

眨眼是本机输入表示的一部分 - 您必须将其破解为 A) 使所述输入不可见并 B) 在其他地方重现其内容。

A) 我建议使用colour: transparent。如果支持较旧的浏览器（我知道旧的 IE 不会喜欢这个），您可以使用 visibility: hidden 或其他技术，但是解决焦点问题会很困难。

B) 使用position: relative 在输入周围创建一个包装器，然后立即创建一个跨度，该跨度将在输入值更改时匹配输入值。

这是一个简单的 codepen 示例：

【讨论】：

【解决方案2】：

css:

.your-field{
    color: transparent;
}

将包装器添加到带有position: relative; 的字段，并在带有position: absolute 的字段之后添加span/div/whatever。
位置跨度正确（左上角应与输入文本起始位置重叠）
在keyup/keydown/custom arrow click/any event that changes input val 上添加事件处理程序

处理函数（jQuery）：

function() { $('.your-absolute-positioned-element').text( $('.your-field').val() ); }

【讨论】：