IT技术 - 获得焦点时选择文本框的所有内容（Vanilla JS 或 jQuery） - 吾爱随笔录

获得焦点时选择文本框的所有内容（Vanilla JS 或 jQuery）

IT技术 javascript jquery user-interface

2021-01-30 17:30:49

什么是 Vanilla JS 或 jQuery 解决方案，它会在文本框获得焦点时选择文本框的所有内容？

6个回答

$(document).ready(function() {
    $("input:text").focus(function() { $(this).select(); } );
});

我这样使用： $("input:text").select().focus();

2021-03-22 17:30:49

由于 mouseup 事件，看起来 WebKit 浏览器会干扰这一点。我添加了这个并且它起作用了： $('input:text').mouseup(function(e) { return false; });

2021-04-01 17:30:49

也只是为了额外的信息：“输入[类型=文本]”现在可以是“输入：文本”问候

2021-04-04 17:30:49

这在 Chrome 上似乎对我不起作用，jQuery 网站说它依赖于浏览器。其他人可以验证吗？

2021-04-09 17:30:49

Kenny 是对的，但不幸的是，“mouseup”也会影响 Chrome 微调控件。触发“点击”而不是“焦点”似乎可以解决这个问题

2021-04-10 17:30:49

<input type="text" onfocus="this.select();" onmouseup="return false;" value="test" />

+ onmouseup="return false" 停止点击取消选择

2021-03-13 17:30:49

我能够通过在 onMouseDown 事件期间将全局变量 doMouseUp 设置为 false 来解决由 enigment 引发的问题，如果这个 != document.activeElement。然后，在 onMouseUp 期间，将 doMouseUp 重置为 true 并在重置之前返回 doMouseUp 值。这变得令人费解并且需要代码 - 我会发布一个答案来更好地解释它。

2021-03-19 17:30:49

onmouseup="return false;"如果您希望用户在文本框内聚焦后能够自由选择和编辑文本，请不要添加。使用此代码，文本将被锁定为“全选”状态，除非用户输入新文本或使用箭头键移动，否则用户将无法对其进行编辑。老实说，这感觉像是一种非常奇怪的行为，除非文本框旨在永久不可编辑（因此被禁用），否则没有意义。

2021-03-24 17:30:49

+1 为某种用于 mouseup 的 stopEvent，或者这不能可靠地工作。这样做的缺点是，一旦光标位于该字段中，单击所选文本内的某处以将光标定位在那里不起作用；点击被有效禁用。尽管如此，对于需要重点选择整个文本的情况，这可能是两害相权取其轻的。

2021-04-03 17:30:49

从技术上讲，onmouseup="return false;"如果您只是希望在用户第一次单击或选项卡时进行选择，则不需要。和香草 javascript +1！

2021-04-10 17:30:49

$(document).ready(function() {
  $("input[type=text]").focus().select();
});

确认的。当前最高投票/接受的答案似乎不适用于 Chrome。

2021-04-03 17:30:49

$(document).ready(function() {
    $("input:text")
        .focus(function () { $(this).select(); } )
        .mouseup(function (e) {e.preventDefault(); });
});

这很好。谢谢！对 Zach 回答的 enigment 评论给出了防止mouseup事件默认值的一个缺点：“一旦光标位于该字段中，单击所选文本中的某处以将光标定位在那里不起作用；单击被有效禁用。仍然，对于在需要重点选择整个文本的情况下，这可能是两害相权取其轻的。”

2021-03-25 17:30:49

jQuery 不是 JavaScript，它在某些情况下更易于使用。

看这个例子：

<textarea rows="10" cols="50" onclick="this.focus();this.select()">Text is here</textarea>

来源：CSS 技巧，MDN

感谢 onclick 的建议，效果很好。不是每个人都使用 jQuery 很高兴看到另一个选项。

2021-03-18 17:30:49

如果您不介意将标记和代码混为一谈，那也许没问题；如今，大多数人都试图让他们的剧本“不引人注目”。哦... jQuery是Javascript。

2021-03-26 17:30:49

这假设用户只使用鼠标

2021-04-06 17:30:49

可以使用 onfocus="this.focus();this.select()" 作为键盘

2021-04-07 17:30:49

其它你可能感兴趣的问题