使用占位符="请输入用户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。

当.select()在移动平台上不起作用时，这个问题有选项:在iOS设备(移动Safari)上以编程方式选择输入字段中的文本

你可以为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" />

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

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

捕获单击事件的问题是，文本中的每次后续单击都将再次选择它，而用户可能希望重新定位光标。

对我有用的是声明一个变量selectSearchTextOnClick，并在默认情况下将其设置为true。点击处理程序检查变量是否仍然为true:如果为true，则将其设置为false并执行select()。然后我有一个模糊事件处理程序，将其设置为true。

到目前为止，结果似乎是我所期望的。

(编辑:我忘了说我曾尝试按照某人的建议捕获焦点事件，但这不起作用:焦点事件触发后，点击事件可以触发，立即取消选择文本)。