自动选择HTML输入中的文本

Ale*_*lex 5 html input

我的HTML输入如下:

<input type="text" value="Link etc..." readOnly={true}/>
Run Code Online (Sandbox Code Playgroud)

我试图使输入内的文本在页面上显示输入的位置自动突出显示.

我发现了许多问题,显示了如何执行此操作onClick等,但没有在输入显示时默认突出显示文本的问题.

我确信这是一项简单的任务 - 但我无法在任何地方找到答案!

注意:我确信我可以通过在我的页面上触发JavaScript函数来解决如何实现这一点 - 但这似乎有点矫枉过正 - 我试图在HTML声明中实现这一点

我也在使用React - 但我不认为这与这个问题有关吗?

Lou*_*ont 6

AFAIK没有默认功能,当输入文本在HTML中处于活动状态时突出显示输入文本.您将需要使用一些Javascript.

我可以建议您查看这个StackOverflow问题,问题提供了一个简单而高效的代码:

<input type="text" name="textbox" value="Test" onclick="this.select()" />
Run Code Online (Sandbox Code Playgroud)

注意:从UX的角度来看,默认情况下突出显示点击输入文本可能是一个坏主意.如果用户输入了某些东西并想要修改他的输入,它将会高亮显示,他需要使用键盘箭头来改变光标位置.小心这个功能.

  • 您可以通过选择焦点而不是点击来解决您提到的用户体验问题。这样,后续的点击就不会打扰用户。 (2认同)