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

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

您不应该再使用这种方法为输入值提供示例。

最好的选择是现在使用占位符HTML属性，如果可能的话:

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

这将导致文本显示，除非输入值，消除了选择文本或清除输入的需要。

请注意占位符不能代替标签，因为一旦输入文本，占位符就会消失，并对可访问性造成问题。

如果有人想在页面加载w/ jQuery(甜蜜的搜索字段)这是我的解决方案

jQuery.fn.focusAndSelect = function() {
    return this.each(function() {
        $(this).focus();
        if (this.setSelectionRange) {
            var len = $(this).val().length * 2;
            this.setSelectionRange(0, len);
        } else {
            $(this).val($(this).val());
        }
        this.scrollTop = 999999;
    });
};

(function ($) {
    $('#input').focusAndSelect();
})(jQuery);

基于这篇文章。感谢CSS-Tricks.com

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

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

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

更新2021:execCommand现在已弃用。

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

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

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

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