如果你正在使用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 -所以如果使用其他内容，可以跳过第一行和最后一行。

实际上，可以使用onclick="this.select();"，但记住不要将其与disabled="disabled"结合使用——这样就不能工作了，你仍然需要手动选择或多点点击来选择。如果希望锁定要选择的内容值，请结合属性readonly。

用这个:

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。

Try:

onclick="this.select()"

这对我来说很有效。

下面是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触发时，你将失去合成事件。