选择焦点上的文本

Posted 2023-05-08

【中文标题】选择焦点上的文本

【英文标题】：Select text on focus

【发布时间】：2011-09-22 03:27:15

【问题描述】：

我正在尝试使用 jQuery 在只读输入框中选择文本，这就是我所拥有的：

    $('input').focus(function()
        $(this).select();
    )

但是，当我点击输入时，它会快速选择所有文本，它会“闪烁”，然后又回到未选择的正常状态。

对此有什么想法吗？

【问题讨论】：

这对我来说似乎没问题，尽管这取决于我点击的位置。单击文本内容的末尾可以正常工作，单击中间第一次会闪烁您描述的闪烁，然后第二次可以工作。

我在jquery 1.4.3中测试了上面的代码，效果很好！

【参考方案1】：

我使用下面的代码让它工作。我的chrome版本：Version 24.0.1312.52

$("#inputid").on("focus",function(e)
    $(this).select();
);

$("#inputid").on("mouseup",function(e)
    return false;
);

希望这会有所帮助...

【讨论】：

这是最干净的解决方案，但您可能希望使用e.preventDefault() 而不是return false。

【参考方案2】：

这两种技术的组合对我有用，尽管我的盒子不是只读的。普通的 select() 可以在 Firefox 中立即使用。但是，在 Safari 中，mouseup 和事件的排序会导致它在 mouseup 时再次取消选择。我附加了一个 mouseup 事件，该事件在 mouseup 应该完成干扰后在延迟计时器上启动选择（如果文本仍然是要替换的默认文本）。

例子：

$('#your_selector').focus(function() 
  $(this).select();
).mouseup(function() 
  if ($(this).val() === 'Enter search terms here')
    var _self = this;
    setTimeout(function() _self.select(),30)
  
);

【参考方案3】：

问题在于输入框是只读的（正如你在问题中提到的）。 （这不是 jQuery 或 javascript 的问题）

IE、FF、Opera都没有问题。但是 Chrome 和 Safari 出现了你提到的问题..

看起来像一个不同的实现，我不确定你是否可以解决这个问题..

演示演示（检查所有打开控制台的浏览器）http://jsfiddle.net/gaby/N9qzq/3/

【讨论】：

谢谢你.. 将不得不看看不同的方法，不会在 Chrome 中工作。

【参考方案4】：

 <input onClick="this.select()" value="Blabla und Blublu" type="text" />

应该工作

【讨论】：

此功能与问题中的相同 - 它会有相同的问题。

事件不同：点击而不是焦点。见***.com/questions/3150275/…

【参考方案5】：

这里发生了一些奇怪的事情。 focus 发生在 mousedown 上，但光标放置发生在 click 上（即 mousedown 后跟 mouseup）。放置光标后，任何选择都会消失。

因此，您很可能希望保留您的 focus 事件（用于制表符和 triggering 目的），但还要添加 click 或 mouseup 处理程序以在以下情况下进行实际选择点击一下。

$('input[type="text"]').focus(function() 
    $(this).select();
).click(function() 
    if ($(this).val() === 'Your default value')
    
        $(this).select();
    
);

if 的存在是为了一旦用户在您的输入中自定义了文本，他们可以在不选择文本的情况下点击。虽然，这并不真正适用于 readonly 文本输入，因此可以安全地删除它。

编辑： 代码似乎充其量是不一致的，所以这可能不是解决方案。

【参考方案6】：

根据 Gaby 在他们的帖子中写的内容，这个解决方案似乎对我有用：

$('input').focus(function()
    var _self = this;
    setTimeout(function()   console.log(_self.select()),100)
    )

【参考方案7】：

我在浏览器上测试时遇到了这个问题。谷歌有这个问题，我认为 Opera 也有。火狐，IE 好的。我在 onclick 和 onfocus 上都通过 this.select() 解决了它。

【参考方案8】：

由于人们提到的不一致，您可以使用 CSS 来模拟您的选择吗？当输入获得焦点时，应用 CSS color 和 background-color 使其看起来像被选中。

【讨论】：

绝对不是。重点是方便用户在字段中复制/粘贴文本。