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

Question

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

<input type="number" />

单击控件时，最好不要在字段中显示闪烁的插入符号。

如何在 HTML 文本输入字段中隐藏插入符号的答案？

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

隐藏不是微调器的文本字段闪烁光标也不会

jQuery UI spinner也有同样的问题

Answer 1

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

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

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

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

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

Answer 2

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() ); }