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

【问题标题】：Selecting all text in HTML text input when clicked单击时选择 HTML 文本输入中的所有文本
【发布时间】：2011-05-03 07:41:40
【问题描述】：

我有以下代码在 HTML 网页中显示文本框。

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

当页面显示时，文本包含 请输入用户 ID 消息。但是，我发现用户需要单击 3 次才能选择所有文本（在这种情况下是 请输入用户 ID）。

是否可以一键全选？

编辑：

对不起，我忘了说：我必须使用输入type="text"

【问题讨论】：

更好的方法是使用<label> 作为标签而不是value。你可以使用 JS 和 CSS 让它看起来一样，同时又不那么反语义。 dorward.me.uk/tmp/label-work/example.html 有一个使用 jQuery 的示例。
如果您在现代 HTML5 项目中工作，甚至可以使用占位符。
placeholder="请输入用户名"

标签： javascript html textinput

【解决方案1】：

你可以使用这个javascript sn-p:

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

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

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

【讨论】：

为了更通用，您可以使用this.id 作为点击处理程序的参数。更好的是，您可以完全消除 getElementById 并将 this 作为参数传递。
在移动 Safari 上不起作用。尝试改为调用 this.setSelectionRange(0, 9999)。
@DeanRadcliffe 不错！我会改用this.setSelectionRange(0, this.value.length)。
Why Should I Avoid Inline Scripting?
浏览器支持有什么更新吗？ w3schools.com/jsref/met_text_select.asp 声称所有浏览器都支持它

【解决方案2】：

嗯，这是 TextBox 的正常活动。

点击 1 - 设置焦点

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

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

【讨论】：

另外，点击 2 次用于选择单词，点击 3 次用于选择行。

【解决方案3】：

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

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

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

这样您就可以为多个元素重复使用 clear 脚本。

【讨论】：

【解决方案4】：

Html（您必须将 onclick 属性放在您希望它在页面上工作的每个输入上）

 <input type="text" value="click the input to select" onclick="this.select();"/>

或者更好的选择

jQuery（这将适用于页面上的每个文本输入，无需更改您的 html）：

<script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>  
<script type="text/javascript">
    $(function(){
        $(document).on('click','input[type=text]',function(){ this.select(); });
    });
</script>

【讨论】：

可能会更好地绑定到焦点事件而不是点击那些在表单元素中切换的人。
@Andrew 这不是必需的，因为如果您通过输入元素选择文本，则始终选择文本。 ;-)
焦点事件有问题，另一方面，模糊事件可以方便地触发表单的验证和自动保存，当您通过标签时也可以使用！
应该可以正常工作，确保您使用的是 jQuery 的更新版本，或者在旧版本上使用 $(document).live()。
除非用户已经拥有 jQuery，否则更好的选择不涉及添加对第三方库的依赖。

【解决方案5】：

试试：

onclick="this.select()"

它对我很有用。

【讨论】：

【解决方案6】：

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

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

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

【讨论】：

请注意，占位符只能用于 html 文档类型。

【解决方案7】：

确实，请使用onclick="this.select();"，但请记住不要将其与disabled="disabled" 结合使用——那样它就不起作用了，您仍然需要手动选择或多次单击才能选择。如果您希望锁定要选择的内容值，请结合属性readonly。

【讨论】：

【解决方案8】：

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

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

到目前为止的结果似乎符合我的预期。

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

【讨论】：

【解决方案9】：

之前发布的解决方案有两个怪癖：

在 Chrome 中，通过 .select() 进行的选择不会坚持 - 添加轻微超时可以解决此问题。
焦点后无法将光标置于所需点。

这是一个完整的解决方案，它选择焦点上的所有文本，但允许在焦点后选择特定的光标点。

$(function () {
    var focusedElement;
    $(document).on('focus', 'input', function () {
        if (focusedElement == this) return; //already focused, return so user can now place cursor at specific point in input.
        focusedElement = this;
        setTimeout(function () { focusedElement.select(); }, 100); //select all text in any field on focus for easy re-entry. Delay sightly to allow focus to "stick" before selecting.
    });
});

【讨论】：

要处理用户点击离开字段然后再次返回的情况，添加.on('blur', 'input', function(){focusedElement = null;})
0 的超时适用于我在 chrome 和 firefox 中。不确定50 的超时来自何处。
解决办法是用onClick代替onFocus。完美运行，不需要复杂的代码。
@CoryHouse 没关系，因为通过选项卡聚焦本机选择文本！无需 javascript。
@CoryHouse 即使在 4 年后，您的代码也能像魅力一样工作。男人，鞠躬。感谢这个肮脏的小技巧。我一直在寻找 2-3 天，直到我找到了这个。 :+1:

【解决方案10】：

当 .select() 在移动平台上不起作用时，这个问题有选项：Programmatically selecting text in an input field on iOS devices (mobile Safari)

【讨论】：

【解决方案11】：

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

【讨论】：

【解决方案12】：

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

【讨论】：

【解决方案13】：

如果有人想在页面加载时使用 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);

基于this 帖子。感谢 CSS-Tricks.com

【讨论】：

【解决方案14】：

在我看来，列出的答案是部分的。我在下面链接了两个示例，说明如何在 Angular 和 JQuery 中执行此操作。

此解决方案具有以下特点：

适用于所有支持 JQuery、Safari、Chrome、IE、Firefox 等的浏览器。
适用于 Phonegap/Cordova：Android 和 IO。
只有在输入获得焦点后全选一次，直到下一次模糊再聚焦
可以使用多个输入并且不会出现故障。
Angular 指令具有很好的重用性，只需添加指令 select-all-on-click
JQuery 可以轻松修改

jQuery： http://plnkr.co/edit/VZ0o2FJQHTmOMfSPRqpH?p=preview

$("input").blur(function() {
  if ($(this).attr("data-selected-all")) {
  //Remove atribute to allow select all again on focus        
  $(this).removeAttr("data-selected-all");
  }
});

$("input").click(function() {
  if (!$(this).attr("data-selected-all")) {
    try {
      $(this).selectionStart = 0;
      $(this).selectionEnd = $(this).value.length + 1;
      //add atribute allowing normal selecting post focus
      $(this).attr("data-selected-all", true);
    } catch (err) {
      $(this).select();
      //add atribute allowing normal selecting post focus
      $(this).attr("data-selected-all", true);
    }
  }
});

角度： http://plnkr.co/edit/llcyAf?p=preview

var app = angular.module('app', []);
//add select-all-on-click to any input to use directive
app.directive('selectAllOnClick', [function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var hasSelectedAll = false;
      element.on('click', function($event) {
        if (!hasSelectedAll) {
          try {
            //iOS, Safari, thows exception on Chrome etc
            this.selectionStart = 0;
            this.selectionEnd = this.value.length + 1;
            hasSelectedAll = true;
          } catch (err) {
            //Non iOS option if not supported, e.g. Chrome
            this.select();
            hasSelectedAll = true;
          }
        }
      });
      //On blur reset hasSelectedAll to allow full select
      element.on('blur', function($event) {
        hasSelectedAll = false;
      });
    }
  };
}]);

【讨论】：

不错的 angularjs 解决方案。谢谢。虽然我不使用 hasSelectedAll 标志。我猜这是第二次点击的规定，这可能意味着用户想要放置光标。

【解决方案15】：

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

和没有绑定的javascript代码

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

【讨论】：

"javascript:" 只在href中使用，应该避免使用。

【解决方案16】：

您始终可以使用document.execCommand (supported in all major browsers)

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

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

2021 年更新：execCommand 现已弃用。

老实说，这可能是最好的，因为它是一个旧的 IE API，已被其他浏览器采用，而且使用起来总是有点奇怪。不过，很高兴有一种解决方案同时适用于 <input> 字段和 contenteditable 元素。

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

对于contenteditable、the modern solution，需要使用范围 API。

【讨论】：

这看起来是一个优雅的解决方案。完整的代码如下所示：<input type="text" onclick="document.execCommand('selectall',null,false);" />
是的，这是我最喜欢做这类任务的方式，尤其是。因为它也适用于 contenteditable 元素。我认为你也可以让它更优雅一点，即<input type="text" onfocus="document.execCommand('selectall')"> - 如果你不使用它们，你可以删除null 和false。
使用onfocus时，在Chrome中点击输入时会选择整个页面。 onclick 工作正常。
MDN 说 execCommand 现在是 deprecated。
@arcanemachine 干杯，感谢您告诉我。我在帖子中添加了一条通知:)

【解决方案17】：

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

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

这使您可以打开一个表单并选择所需的元素。它的工作原理是使用自动对焦来点击输入，然后向自身发送一个 onfocus 事件，然后选择文本。

【讨论】：

【解决方案18】：

您所问的确切解决方案是：

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

【讨论】：

【解决方案19】：

如果您只是想在用户选择元素时替换占位符文本，那么现在使用placeholder 属性显然是最佳实践。但是，如果您想在字段获得焦点时选择所有当前值，那么@Cory House 和@Toastrackenigma 答案的组合似乎是最规范的。使用focus 和focusout 事件，以及设置/释放当前焦点元素的处理程序，并在获得焦点时全选。一个 angular2/typescript 示例如下（但转换为 vanilla js 很简单）：

模板：

<input type="text" (focus)="focus()" (focusout)="focusout()" ... >

组件：

private focused = false;

public focusout = (): void => {
    this.focused = false;
};

public focus = (): void => {
    if(this.focused) return;
    this.focused = true;

    // Timeout for cross browser compatibility (Chrome)
    setTimeout(() => { document.execCommand('selectall', null, false); });
};

【讨论】：

【解决方案20】：

你可以替换

<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。占位符使它不是一个值，而是顾名思义的占位符。这就是在多个在线表格中使用的内容，上面写着“此处的用户名”或“电子邮件”，当您单击它时，“电子邮件”会消失，您可以立即开始输入。

【讨论】：

【解决方案21】：

这是 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”事件触发时该元素具有already received focus（因此activeElement 检查将失败）。

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

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

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

【讨论】：

是 React 新的 jQuery 吗？
@vpzomtrrfrt 当然是：D J/K。我已经在 React 中编写了这个，并且我不打算仅仅为了一些 SO 点而取消它。要么接受，要么离开：-)
这是 React 中的一个例子吗？！这更像是原生 javascript 中的一个示例。

【解决方案22】：

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

【讨论】：

【解决方案23】：

如果你正在寻找一个纯粹的 javascript 方法，你也可以使用：

document.createRange().selectNodeContents( element );

这会选择所有的文本，所有主流浏览器都支持。

要触发焦点选择，您只需要像这样添加事件侦听器：

document.querySelector( element ).addEventListener( 'focusin', function () {

    document.createRange().selectNodeContents( this );

} );

如果你想将它内嵌在你的 HTML 中，那么你可以这样做：

<input type="text" name="myElement" onFocus="document.createRange().selectNodeContents(this)'" value="Some text to select" />

这只是另一种选择。似乎有几种方法可以做到这一点。（这里也提到了document.execCommand("selectall")）

document.querySelector('#myElement1').addEventListener('focusin', function() {

  document.createRange().selectNodeContents(this);

});

<p>Cicking inside field will not trigger the selection, but tabbing into the fields will.</p>
<label for="">JS File Example<label><br>
<input id="myElement1" value="This is some text" /><br>
<br>
<label for="">Inline example</label><br>
<input id="myElement2" value="This also is some text" onfocus="document.createRange().selectNodeContents( this );" />

【讨论】：

【解决方案24】：

我一直在寻找纯 CSS 的解决方案，发现它适用于 iOS 浏览器（经过测试的 safari 和 chrome）。

它在桌面 chrome 上没有相同的行为，但在那里选择的痛苦并不那么大，因为作为用户，您有更多的选择（双击、ctrl-a 等）：

.select-all-on-touch {
    -webkit-user-select: all;
    user-select: all;
}

【讨论】：

【解决方案25】：

使用placeholder="Please enter the user ID" 而不是value="Please enter the user ID" 是这种情况的最佳方法，但该函数在某些情况下可能很有用。

<input> 元素已经可以监听focus 事件。我们可以只添加事件监听器而不是document，并且不需要再监听click。

纯 JavaScript：

document.getElementById("userid").addEventListener("focus", function() {
    this.select();
});

使用 JQuery：

$("#userid").on("focus", function() {
    this.select();
});

您可以使用 this.setSelectionRange(0, this.value.length) 代替 this.select() 取决于您的目的，但这不适用于某些输入类型，例如 number。

【讨论】：

【解决方案26】：

Live demo

<input id="my_input" style="width: 400px; height: 30px;" value="some text to select">
<br>
<button id="select-bn" style="width: 100px; height: 30px; margin-top: 20px;cursor:pointer;">Select all</button>
<br><br>
OR 
<br><br>
Click to copy
<br><br>
<input id="my_input_copy" style="width: 400px; height: 30px;" value="some text to select and copy">
<br>
<button id="select-bn-copy" style="width: 170px; height: 30px; margin-top: 20px;cursor:pointer;">Click copy text</button>


<script type="text/javascript">
$(document).on('click', '#select-bn', function() {
  $("#my_input").select();
});


//click to select and copy to clipboard

var text_copy_bn = document.getElementById("select-bn-copy");
text_copy_bn.addEventListener('click', function(event) {
  var copy_text = document.getElementById("my_input_copy");
  copy_text.focus();
  copy_text.select();
  try {
    var works = document.execCommand('copy');
    var msg = works ? 'Text copied!' : 'Could not copy!';
    alert(msg);
  } catch (err) {
    alert('Sorry, could not copy');
  }
});
</script>

【讨论】：

【解决方案27】：

使用这个：

var textInput = document.querySelector("input");
textInput.onclick = function() {
  
  textInput.selectionStart = 0;
  textInput.selectionEnd = textInput.value.length;

}

&lt;input type="text"&gt;

【讨论】：

【解决方案28】：

我认为最好通过事件来控制。这个变体看起来非常直观，并且也可以与 ts 一起使用：

    onFocus={e => {
      e.target.select();
    }

如果您每次点击都需要全选，那么您可以使用这个：

    onClick={e => {
      e.target.focus();
      e.target.select();
    }

【讨论】：