单击时选择HTML文本输入中的所有文本

嗯，这是TextBox的正常活动。

点击1-设置焦点

点击2/3（双击）-选择文本

您可以在页面首次加载时将重点放在TextBox上，以将“选择”减少为单个双击事件。

在输入字段中使用“占位符”而不是“值”。

像这样的HTML <input type="text" value="click the input to select" onclick="javascript:textSelector(this)"/>

和没有绑定的javascript代码

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

当.select（）在移动平台上不起作用时，此问题具有选项：以编程方式在iOS设备上的输入字段中选择文本（移动Safari）

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

对我有用的是声明一个变量selectSearchTextOnClick，并将其默认设置为true。点击处理程序检查该变量是否仍然为true：如果是，则将其设置为false并执行select（）。然后，我有一个模糊事件处理程序，将其设置回true。

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

（编辑：我忽略了我曾尝试按照某人的建议捕获焦点事件，但这没有用：在焦点事件触发后，click事件会触发，立即取消选择文本）。

这是React中的示例，但是如果您愿意，可以将其转换为Vanilla 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检查是必需的，以便用户可以将光标定位在所需位置，而无需不断重新选择整个输入。

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

最后，这在React中el = ev.currentTarget是必需的，因为React会重用事件对象，并且在setTimeout触发时您将丢失合成事件。

您要求的确切解决方案是：

<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" />

您可以更换

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

带有：

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

占位符用于替换值，就像您希望人们能够在文本框中键入内容一样，而无需多次单击或使用ctrl + a。占位符使它不是一个值，但顾名思义是占位符。那就是在多个在线表单中使用的内容，上面写着“ Username here”或“ Email”，当您单击它时，“ Email”消失，您可以立即开始输入。

这是Shoban答案的可重用版本：

<input type="text" id="userid" name="userid"
 value="Please enter the user ID" onfocus="Clear(this);"
/>

function Clear(elem)
{
elem.value='';
}

这样，您可以将清除脚本重用于多个元素。

注意：当您考虑时onclick="this.select()"，在第一次单击时，将选择“所有字符”，之后，您可能想要编辑输入中的内容并再次在字符之间单击，但是它将再次选择所有字符。要解决此问题，您应该使用onfocus而不是onclick。

确实，请使用onclick="this.select();"但切记不要将其结合使用disabled="disabled"-否则将无法使用，您仍然需要手动选择或单击鼠标以进行选择。如果您希望锁定要选择的内容值，请与属性结合使用readonly。

您可以随时使用document.execCommand（所有主要浏览器均支持）

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

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

输入自动对焦，并带有onfocus事件：

<INPUT onfocus="this.select()" TYPE="TEXT" NAME="thing" autofocus>

这使您可以打开一个选定了所需元素的表单。它通过使用自动聚焦来命中输入，然后向自身发送一个onfocus事件，该事件依次选择文本。

尝试：

onclick="this.select()"

这对我很有效。

我知道这很旧，但是最好的选择是现在placeholder尽可能使用新的HTML属性：

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

除非输入值，否则这将导致文本显示，从而无需选择文本或清除输入。

您可以使用以下javascript代码段：

<input onClick="this.select();" value="Sample Text" />

但显然，它不适用于移动Safari。在这种情况下，您可以使用：

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