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

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

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

只需点击一下即可选择整个文本吗？

编辑:

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

1> Boris Pavlov..：

---

您可以使用此javascript代码段:

但显然它不适用于移动Safari.在这些情况下,您可以使用:

---

@DeanRadcliffe不错!我会改用`this.setSelectionRange(0,this.value.length).

---

在移动Safari上无法正常工作.请尝试调用this.setSelectionRange(0,9999).

---

为了使它更通用,你可以使用`this.id`作为click处理程序的参数.更好的是,你可以完全消除`getElementById`并将`this`作为参数传递.

---

[我为什么要避免使用内联脚本？](http://programmers.stackexchange.com/questions/86589/why-should-i-avoid-inline-scripting)

---

浏览器支持的任何更新？https://www.w3schools.com/jsref/met_text_select.asp声称所有浏览器都支持它

---

但是如果输入类型是数字怎么办？

2> Cory House..：

---

以前发布的解决方案有两个怪癖:

在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;})`

---

@CoryHouse没关系,因为Focus via tab本身选择了文字!不需要JavaScript.

3> oLinkWebDeve..：

---

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

或更好的选择

jQuery(这将适用于页面上的每个文本输入,无需更改您的HTML):

---

结合焦点事件可能会更好,而不是单击那些通过表单元素选项卡的人.

---

@Andrew这是没有必要的,因为如果您通过输入元素选项卡,则始终选择文本.;-)

---

除非用户已经拥有jQuery,否则更好的选择不涉及在第三方库上添加依赖项.

4> Thom Porter..：

---

我知道这是旧的,但最好的选择是尽可能使用新的placeholderHTML属性:

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

---

请注意,占位符仅允许使用doctype html.

5> 小智..：

---

列出的答案是部分根据我.我在下面链接了两个如何在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);
    }
  }
});

Angular: 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;
      });
    }
  };
}]);

6> Toastrackeni..：

---

您可以随时使用document.execCommand(在所有主流浏览器中都支持)

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

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

7> Slulego..：

---

尝试:

onclick="this.select()"

这对我很有效.

8> fyngyrz..：

---

输入自动对焦,具有onfocus事件:

这使您可以打开一个选定了所需元素的表单.它的工作原理是使用自动聚焦命中输入,然后输入一个onfocus事件,然后选择文本.

9> LenArt..：

---

事实上,使用onclick="this.select();"但记住不要将它与disabled="disabled"它结合- 它将不起作用,你仍然需要手动选择或多击以选择.如果要锁定要选择的内容值,请与属性组合readonly.