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

2020/09/24 04:01 · javascript ·  · 0评论

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

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

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

只需单击一下就可以选择整个文本吗?

编辑:

抱歉,我忘了说:我必须使用输入 type="text"

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

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

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

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

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

  1. 在Chrome浏览器中,通过.select()进行的选择不粘滞-添加一点超时即可解决此问题。
  2. 聚焦后无法将光标放置在所需的位置。

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

        $(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.
            });
        });

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>

我知道这已经很老了,但是最好的选择是现在placeholder尽可能使用新的HTML属性:

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

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

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

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

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

根据我的看法,列出的答案是不完整的。我在下面链接了两个如何在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;
      });
    }
  };
}]);

尝试:

onclick="this.select()"

这对我很有效。

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

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

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

这使您可以打开一个窗体,并选择所需的元素。它通过使用自动聚焦来命中输入,然后向自身发送一个onfocus事件,该事件又选择了文本来工作。

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

您可以更换

<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='';
}

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

您所要求的确切解决方案是:

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

这是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触发时您将丢失合成事件。

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

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

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

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

当.select()在移动平台上不起作用时,此问题有一些选项:以编程方式在iOS设备上的输入字段中选择文本(移动Safari)

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

和没有绑定的javascript代码

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

嗯,这是TextBox的正常活动。

点击1-设置焦点

点击2/3(双击)-选择文本

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

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

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

如果有人想在使用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

如果您只是想让占位符文本在用户选择元素时被替换,那么显然,placeholder如今最好使用属性。但是,如果要在某个字段获得焦点时选择所有当前值,则@Cory House和@Toastrackenigma答案的组合似乎是最典型的。使用focusfocusout事件,以及用于设置/释放当前focus元素的处理程序,并在聚焦时全选。一个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); });
};
本文地址:http://javascript.askforanswer.com/danjishixuanzehtmlwenbenshuruzhongdesuoyouwenben.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!