我们可以在不禁用数字字段的情况下隐藏插入符号

Question

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

<input type="number" />

单击控件时，没有在场中闪烁的插入符号会很好。

How to hide the caret in an HTML text input field?

的答案

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

Hide textfield blinking cursor也不是微调器

jQuery UI spinner也有同样的问题

Answer 1

css:

.your-field{
    color: transparent;
}

1. 使用position: relative;在span/div/whatever字段后面的position: absolute添加包装器。

2. 正确的位置跨度（它的左上角应与输入文本的起始位置重叠）

3. 在keyup/keydown/custom arrow click/any event that changes input val
上添加事件处理程序

4. 处理函数（jQuery）：

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

Answer 2

闪烁是本机输入表示的一部分 - 你必须将其破解为A）使所述输入不可见，并且B）在其他地方重现其内容。

A）我建议使用colour: transparent。如果较旧的浏览器支持（我知道旧的IE不会喜欢这个），你可以选择visibility: hidden或其他技术，但那么解决焦点将是艰难的。

B）使用position: relative围绕输入创建一个包装器，然后立即创建一个跨度，它会随着输入值的变化而匹配。

这是一个简单的代码集示例：

http://codepen.io/barneycarroll/pen/beFgm