Question

我有HTML输入如下：

<input type="text" value="Link etc..." readOnly={true}/>

我试图让输入内的文字在页面上显示输入的位置自动高亮显示。

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

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

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

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

Answer 1

AFAIK 没有默认功能可突出显示 HTML 中的活动输入文字。您需要使用一些 Javascript 。

我建议您查看this StackOverflow question，它提供了一个简单而高效的代码：

＆＃13;

<input type="text" name="textbox" value="Test" onclick="this.select()" />

＆＃13;

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

Answer 2

如果您希望始终选中该框，也可以使用document.ready使用jQuery执行此操作。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<input type="text" name="textbox" id="textbox" value="Test" />
    <script>
    $(document).ready(function(){
	var autoselect = document.getElementById('textbox');
	autoselect.select();
      
    });
    </script>

自动选择HTML输入中的文本

2 个答案: