你可以使用文档。execCommand(所有主要浏览器都支持)

document.execCommand("selectall", null, false);

选择当前聚焦元素中的所有文本。

更新2021:execCommand现在已弃用。

说实话，这可能是最好的选择，因为它是一个老的IE API，已经被其他浏览器采用了，使用它总是有点奇怪。尽管如此，有一个解决方案可以同时处理<input>字段和可满足元素就很好了。

.select()可能是目前<input>字段的最佳方式。

对于contenteditable，现代的解决方案是使用range API。

下面是React中的一个例子，但如果你喜欢，它可以在香草JS上翻译成jQuery:

class Num extends React.Component {

    click = ev => {
        const el = ev.currentTarget;
        if(document.activeElement !== el) {
            setTimeout(() => {
                el.select();    
            }, 0);
        }
    }

    render() {
        return <input type="number" min={0} step={15} onMouseDown={this.click} {...this.props} />
    }
}

这里的技巧是使用onMouseDown，因为元素在“click”事件触发时已经收到了焦点(因此activeElement检查将失败)。

activeElement检查是必要的，这样用户就可以将光标定位到他们想要的位置，而不必不断地重新选择整个输入。

超时是必要的，因为否则文本将被选中，然后立即取消选中，因为我猜浏览器在后面会进行光标定位检查。

最后，el = ev。currentTarget在React中是必要的，因为React重用事件对象，当setTimeout触发时，你将失去合成事件。

这是一个正常的文本框活动。

单击“1 -设置焦点”

点击2/3(双击)-选择文本

您可以在页面第一次加载时将焦点设置在文本框上，以减少“选择”为单个双击事件。

像这样的Html <input type="text" value="点击输入选择" onclick="javascript:textSelector(this)" / >

和javascript代码没有绑定

function textSelector(ele){
    $(ele).select();
}

你所问问题的确切解决方案是:

<input type="text" id="userid" name="userid" value="Please enter the user ID" onClick="this.setSelectionRange(0, this.value.length)"/>

但是我猜想，您试图在输入中显示“请输入用户ID”作为占位符或提示。 因此，您可以使用以下更有效的解决方案:

<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />

如果你正在使用AngularJS，你可以使用一个自定义指令来方便访问:

define(['angular'], function () {
    angular.module("selectionHelper", [])
    .directive('selectOnClick', function () {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {                
                element.on('click', function () {
                    this.select();
                });
            }
        };
    });
});

现在你可以这样使用它:

<input type="text" select-on-click ... />

这个示例带有requirejs -所以如果使用其他内容，可以跳过第一行和最后一行。