点击时选择HTML文本输入框中的所有文本。

13 浏览
0 Comments

点击时选择HTML文本输入框中的所有文本。

我有以下的代码来在一个HTML网页中显示一个文本框。\n


\n当页面显示时,文本框中显示的是“请输入用户ID”的提示信息。然而,我发现用户需要点击三次才能选择所有的文本(在这种情况下是“请输入用户ID”)。\n有没有可能只需一次点击就能选择整个文本?\n编辑:\n抱歉,我忘了说:我必须使用类型。

0
0 Comments

问题的原因是当用户点击HTML文本输入框时,文本并没有自动全选。为了解决这个问题,可以使用HTML的onclick属性或者使用jQuery来实现。使用onclick属性的方法是在每个需要它起作用的输入框上添加该属性,并设置为this.select()。另一种更好的方法是使用jQuery,这样可以为页面上的每个文本输入框都起作用,无需更改HTML代码。使用jQuery的方法是在页面中引入jQuery库,然后在script标签中使用以下代码:

$(document).on('click','input[type=text]',function(){ this.select(); });

如果用户通过Tab键切换表单元素,也可以绑定到focus事件而不是click事件。但实际上并不需要这样做,因为如果通过Tab键切换输入元素,文本始终会被选中。focus事件可能会出现问题,而blur事件则非常适合触发验证和自动保存表单,而且在通过Tab键切换时也能正常工作。确保使用更新版本的jQuery,或者在旧版本上使用$(document).live()方法,就可以正常工作。除非用户已经使用了jQuery,否则最好不要添加对第三方库的依赖。对于那些尽量避免在HTML中编写事件处理程序的人来说,这是一个完美的解决方案,但不知道为什么没有更多的赞。

0
0 Comments

在HTML文本输入框中,当点击输入框时无法自动全选文本的问题,可以通过以下方法解决:

1. 在Chrome浏览器中,使用.select()方法选择文本无法生效,可以通过添加一个小的延时来解决这个问题。

2. 在获取焦点后无法将光标定位到指定位置。为了解决这个问题,可以使用以下完整的解决方案:

$(function () {
    var focusedElement;
    $(document).on('focus', 'input', function () {
        if (focusedElement == this) return; //如果已经获取焦点,返回以便用户可以在输入框中指定光标位置
        focusedElement = this;
        setTimeout(function () { focusedElement.select(); }, 100); //延时一段时间以确保获取焦点后再全选文本
    });
});

3. 为了处理用户从输入框点击其他地方再次点击输入框的情况,可以添加以下代码:

$(document).on('blur', 'input', function(){focusedElement = null;})

4. 在Chrome和Firefox中,使用延时为0的setTimeout能够正常工作,不需要设置50的延时。

5. 可以使用onClick替代onFocus来解决问题,但是当通过按Tab键获取焦点时,onClick事件不会触发。

6. 使用setTimeout和document.execCommand()结合使用可以达到全选文本的效果。

7. 有用户在Safari / iOS 11中只能通过在setTimeout中使用延时才能实现全选只读文本输入框的功能。

8. 有用户反馈这段代码已经使用4年了仍然能够正常工作,并且对此表示感谢。

9. 有用户指出这段代码不可靠,如果点击输入框并等待1秒钟,会发现浏览器会自动选择文本。

10. 如果文本已经被全选,下一次点击输入框时不会触发焦点事件,所以无法在获取焦点后将光标放置在指定位置。

以上是解决在HTML文本输入框中点击输入框无法全选文本的问题的方法和原因。

0
0 Comments

当在HTML文本输入框中点击时选择所有文本,可以使用JavaScript的`.select()`方法来实现。但是在移动Safari中,这种方法不起作用。在这种情况下,可以使用`this.setSelectionRange(0, this.value.length)`来实现。为了更通用,可以使用`this.id`作为点击处理程序的参数,或者干脆完全消除`getElementById`并将`this`作为参数传递。在移动Safari中,可以尝试调用`this.setSelectionRange(0, 9999)`。对于数字类型的输入,以上方法无法使用。关于浏览器支持的更新,可以参考w3schools的文档。如果想要在不可编辑的字段中使用该方法,应该使用`readonly`而不是`disabled="disabled"`。为了在选择后能够在其他地方放置光标,可以添加一个脚本,并在头部使用`var inp_sel = false;`,将事件改为`onfocus="if(!inp_sel) { inp_sel=true; this.select(); } else { inp_sel=false; }" onmouseout="inp_sel=false;"`。通常情况下,最好将`onClick`改为`onFocus`,以简化代码。在Chrome中,甚至只使用`onClick="select"`就足够了,但在Firefox中不起作用。默认情况下,文本在获得焦点时会被选择(例如,通过Tab键进入输入框),所以这种方法实际上没有添加任何内容。使用`onfocus`可能比`onclick`更好,因为它只在首次点击输入框时选择所有内容,而`onclick`会在每次点击输入框时选择所有内容,即使你已经在输入框内部了。需要注意的是,选择范围的方法对于数字类型的输入不起作用。

0