在输入字段

Question

我有一个输入字段，最后我创建了一个字符计数器：

现在的问题是，可以在柜台下面打字，这是不好的：

我希望在输入字段结束之前将输入区域限制在一定距离，如下所示：

我知道maxlenght但是因为这些字母有不同的长度，即你可以适合183“i”但只有57“W”，如果你的打字被切断，这将导致非常不直观的打字体验在田野中央。

Answer 1

我遇到的两种可能的解决方案。

1

简单地缩短输入并将计数器放在输入旁边，然后将公共父元素设置为看起来像输入。这是一种更简单且不易出错的解决方案。

2

这种方式有点复杂，但基本上你要做的是用相同的字体大小/重量/族创建隐藏元素（ NB 而不是display: none;）并附加输入字段的keydown事件处理程序。

在此处理程序中，您将输入中的内容复制到隐藏元素，测量宽度（以像素为单位）并将其与输入进行比较。如果差异太小，则在输入处理程序中返回false，确保您不会阻止用户先按删除或退格键。

但应该注意的是，这种方法很难做到正确，我认为这是＆＃34;脏＆＃34;溶液