首页 文章

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

提问于
浏览 次
435

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

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

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

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

Edit:

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

javascript html textinput

22 回答

  • 1

    那么这是TextBox的正常活动 .

    Click 1 - 设置焦点

    Click 2/3 （双击） - 选择文字

    首次加载页面时，可以在TextBox上设置 focus ，以将"select"减少为单个双击事件 .

    回复于
  • 33

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

    和javascript代码没有绑定

    function textSelector(ele){
    $(ele).select();
}
    回复于
  • 5

    尝试：

    onclick="this.select()"

    这对我很有效 .

    回复于
  • 2

    你问的确切解决方案是：

    <input type="text" id="userid" name="userid" value="Please enter the user ID" onClick="this.setSelectionRange(0, this.value.length)"/>

    但我想，你试图在输入中显示 "Please enter the user ID" 作为占位符或提示 . 因此，您可以使用以下方法作为更有效的解决方案：

    <input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />
    回复于
  • 10

    您可以使用此javascript代码段：

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

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

    <input onClick="this.setSelectionRange(0, this.value.length)" value="Sample Text" />
    回复于
  • 40

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

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

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

    回复于
  • 2

    你可以替换

    <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”消失，您可以立即开始输入 .

    回复于
  • 6

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

    回复于
  • 8

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

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

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

    回复于
  • 2

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

    回复于
  • 2

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

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

    回复于
  • 0

    确实，使用 onclick="this.select();" 但请记住不要将它与 disabled="disabled" 结合使用 - 它将无法正常工作，您仍然需要手动选择或多击以选择 . 如果要锁定要选择的内容值，请与属性 readonly 结合使用 .

    回复于
  • 3

    你可以随时使用 document.execCommand （supported in all major browsers）

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

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

    回复于
  • 12

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

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

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

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

    回复于
  • 2

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

    • 在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(); }, 50); //select all text in any field on focus for easy re-entry. Delay sightly to allow focus to "stick" before selecting.
            });
        });
    回复于
  • 0

    如果您只是尝试在用户选择元素时替换占位符文本，那么现在最好使用 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); });
};
    回复于
  • 2

    列出的答案是部分根据我 . 我在下面链接了两个如何在Angular和JQuery中执行此操作的示例 .

    This solution has the following features:

    • 适用于支持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;
      });
    }
  };
}]);
    回复于
  • 0

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

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

    OR A BETTER OPTION

    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>
    回复于
  • 747

    这是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 检查是必要的，以便用户可以将光标定位在他们想要的位置，而无需不断地重新选择整个输入 .

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

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

    回复于
  • 1

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

    回复于
  • 0

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

    对我有用的是声明一个变量selectSearchTextOnClick，默认情况下将其设置为true . click处理程序检查变量是否仍然为真：如果是，则将其设置为false并执行select（） . 然后我有一个模糊事件处理程序，它将其设置为true .

    到目前为止，结果似乎是我期望的行为 .

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

    回复于
  • 56

    此问题包含.select（）何时无法在移动平台上运行的选项：Programmatically selecting text in an input field on iOS devices (mobile Safari)

    回复于

相关问题