选择文本时 Firefox 输入无法滚动

Question

我有一个点击选择的输入：

<input onClick="this.select();" type="text" name="country" value="Norwayasdasdasddddddddddddddddddddddddddddddddddddddd" readonly><br>

问题是，在 Firefox 中，我第一次可以通过按住鼠标左键向右滚动。那么，我不能做第二次了。当我想第二次滚动查看完整值时，整个文本都被选中，我无法再滚动了。我在 Chrome.

中没有这个问题

请帮忙！

谢谢，昆西

Answer 1

您可以尝试使用以下解决方法解决问题：

<input onmouseout="var tmp=this.value;this.value='';this.value=tmp" onClick="this.select();" type="text" name="country" value="Norwayasdasdasddddddddddddddddddddddddddddddddddddddd" readonly><br>

因此，当鼠标离开输入区域时，文本会被重写（此 hack 会从文本中删除选择）。如果你想在鼠标退出输入区域时保持选中的文本，你可以使用 onmouseenter 而不是 onmouseout

Answer 2

一种解决方案是通过记住您上次单击时是否 select 编辑了文本来使单击成为切换按钮。所以添加一个变量

var selection = false;

并将 onclick 处理程序更改为

if (selection = !selection) this.select();

然后第一个 slick 将 select 所有文本，下一次点击将删除 select 它，等等。参见 JSFiddle。

编辑：另一种方法是删除select 鼠标按下时的文本。那将更接近您的需要。

<input onMouseDown="this.setSelectionRange(0,0)" onClick="this.select();"
type="text" name="country"
value="Norwayasdasdasddddddddddddddddddddddddddddddddddddddd" readonly>

参见 other JSFiddle。

选择文本时 Firefox 输入无法滚动

Firefox input can't scroll when text is selected

html

javascript

css

firefox