你可以为HTMLElement使用JavaScript的.select()方法:

<label for="userid">用户ID <input onClick="this.select();" value="Please enter the user ID" ID ="userid" /> .

但显然它在移动版Safari上不起作用。在这些情况下，你可以使用:

<input onClick="this.setSelectionRange(0, this.value.length)" value="Sample Text" id="userid" />

用这个:

var textInput = document.querySelector（“input”）; textInput.onclick = function（） { 文本输入选择开始 = 0; textInput.selectionEnd = textInput.value.length; } <输入类型=“文本”>

使用占位符="请输入用户ID"而不是value="请输入用户ID"是这种情况下的最佳方法，但该函数在某些情况下可能有用。

<input>元素已经可以监听焦点事件。我们可以将事件监听器添加到它而不是文档中，并且不需要再监听单击。

纯JavaScript:

document.getElementById("userid").addEventListener("focus", function() {
    this.select();
});

JQuery:

$("#userid").on("focus", function() {
    this.select();
});

你可以用这个。setSelectionRange(0, this.value.length)而不是this.select()取决于你的目的，但这将不适用于某些输入类型，如number。

之前发布的解决方案有两个怪癖:

在Chrome中，通过.select()选择不粘-添加一个轻微的超时解决了这个问题。 不可能在聚焦后将光标放置在所需的点上。

这里有一个完整的解决方案，选择焦点上的所有文本，但允许在焦点后选择特定的游标点。

$(function () {
    var focusedElement;
    $(document).on('focus', 'input', function () {
        if (focusedElement == this) return; //already focused, return so user can now place cursor at specific point in input.
        focusedElement = this;
        setTimeout(function () { focusedElement.select(); }, 100); //select all text in any field on focus for easy re-entry. Delay sightly to allow focus to "stick" before selecting.
    });
});

现场演示

<input id="my_input" style="width: 400px; height: 30px;" value="some text to select">
<br>
<button id="select-bn" style="width: 100px; height: 30px; margin-top: 20px;cursor:pointer;">Select all</button>
<br><br>
OR 
<br><br>
Click to copy
<br><br>
<input id="my_input_copy" style="width: 400px; height: 30px;" value="some text to select and copy">
<br>
<button id="select-bn-copy" style="width: 170px; height: 30px; margin-top: 20px;cursor:pointer;">Click copy text</button>


<script type="text/javascript">
$(document).on('click', '#select-bn', function() {
  $("#my_input").select();
});


//click to select and copy to clipboard

var text_copy_bn = document.getElementById("select-bn-copy");
text_copy_bn.addEventListener('click', function(event) {
  var copy_text = document.getElementById("my_input_copy");
  copy_text.focus();
  copy_text.select();
  try {
    var works = document.execCommand('copy');
    var msg = works ? 'Text copied!' : 'Could not copy!';
    alert(msg);
  } catch (err) {
    alert('Sorry, could not copy');
  }
});
</script>

如果你正在寻找一个纯粹的javascript方法，你也可以使用:

document.createRange().selectNodeContents( element );

这将选择所有的文本，所有主流浏览器都支持。

要触发焦点上的选择，你只需要像这样添加事件监听器:

document.querySelector( element ).addEventListener( 'focusin', function () {

    document.createRange().selectNodeContents( this );

} );

如果你想把它内联到你的HTML中，你可以这样做:

<input type="text" name="myElement" onFocus="document.createRange().selectNodeContents(this)'" value="Some text to select" />

这只是另一种选择。似乎有几种方法可以做到这一点。(这里也提到了document.execCommand("selectall"))

document.querySelector(“# myElement1”)。addEventListener('focusin'， function() { .selectNodeContents document.createRange () (); })； </p> .</p> .</p> .</p>单击字段内将不会触发选择，但单击标签进入字段将触发选择 <label for="">JS文件示例<label><br> <input id="myElement1" value="This is some text" /><br> . < br > <label for="">内联示例</label><br> <input id="myElement2" value="This also is some text" onfocus="document.createRange()。selectNodeContents(this);"/>