javascript 选择焦点上的文字
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6470123/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Select text on focus
提问by dzm
I'm trying to select the text in a readonly input box, using jQuery, this is what I have:
我正在尝试使用 jQuery 在只读输入框中选择文本，这就是我所拥有的：
$('input').focus(function(){
$(this).select();
})
When I click on the input however, it quickly selects all the text, it "blinks", then it goes back to normal state of being unselected.
但是，当我单击输入时，它会快速选择所有文本，然后“闪烁”，然后返回到未选择的正常状态。
Any ideas around this?
关于这个的任何想法？
采纳答案by Gabriele Petrioli
The problem is with the fact that the input box is readonly (as you mention in you question).
(it is not a jQuery or javascript problem)
问题在于输入框是只读的（正如您在问题中提到的）。
（这不是 jQuery 或 javascript 问题）
IE, FF and Opera have no problem. But Chrome and Safari exhibit the issue you mention..
IE、FF 和 Opera 都没有问题。但是 Chrome 和 Safari 出现了您提到的问题。
Looks like a different implementation, and i am not sure you can work-around that..
看起来像一个不同的实现，我不确定你能解决这个问题..
demo to showcase (check in all browsers with console open)
http://jsfiddle.net/gaby/N9qzq/3/
演示（在打开控制台的情况下检查所有浏览器）
http://jsfiddle.net/gaby/N9qzq/3/
回答by saraf
I got it working using the below code . My chrome version:Version 24.0.1312.52
我使用下面的代码让它工作。我的 chrome 版本：Version 24.0.1312.52
$("#inputid").on("focus",function(e){
$(this).select();
});
$("#inputid").on("mouseup",function(e){
return false;
});
Hope this helps ...
希望这可以帮助 ...
回答by Scott Fisher
A combination of the two techniques worked for me, though my box wasn't read-only. The normal select() works right away in Firefox. However, in Safari, the mouseup and ordering of events causes it to deselect itself again on mouseup. I attached a mouseup event that starts a select on a delayed timer after the mouseup should have finished interfering (if the text is still the default text to be replaced).
这两种技术的组合对我有用，尽管我的盒子不是只读的。普通的 select() 可以立即在 Firefox 中工作。然而，在 Safari 中，mouseup 和事件的排序会导致它在 mouseup 时再次取消选择自己。我附加了一个 mouseup 事件，它在 mouseup 应该完成干扰后在延迟的计时器上启动选择（如果文本仍然是要替换的默认文本）。
Example:
例子：
$('#your_selector').focus(function() {
$(this).select();
}).mouseup(function() {
if ($(this).val() === 'Enter search terms here'){
var _self = this;
setTimeout(function(){ _self.select()},30)
}
});
回答by Mexx
<input onClick="this.select()" value="Blabla und Blublu" type="text" />
Should work
应该管用
回答by Ryan Kinal
There's a little bit of an oddity happening here. focushappens on mousedown, but cursor placement happens on click(i.e. a mousedownfollowed by a mouseup). When the cursor is placed, any selection goes away.
这里发生了一些奇怪的事情。focus发生在鼠标按下时，但光标放置发生在click（即 amousedown后跟 a mouseup）。放置光标后，任何选择都会消失。
So, you'll most likely want to keep your focusevent (for tabbing and triggering purposes) but also add a clickor a mouseuphandler to do the actual select in the case of a click.
因此，您很可能希望保留您的focus事件（用于 Tab 和triggering 目的），但还要添加一个click或一个mouseup处理程序来在单击的情况下进行实际选择。
$('input[type="text"]').focus(function() {
$(this).select();
}).click(function() {
if ($(this).val() === 'Your default value')
{
$(this).select();
}
});
The ifexists so that once a user has customized text in your input, they can click around without selecting text. Although, that doesn't really apply to a readonlytext input, so it may be safely removed.
的if存在，使得一旦用户自定义你的输入文本，他们可以点击周围没有选择文本。虽然，这并不真正适用于readonly文本输入，因此可以安全地删除它。
Edit:Code seems to be inconsistent at best, so this may not be the solution.
编辑：代码似乎充其量是不一致的，所以这可能不是解决方案。
回答by Jamie Dixon
Based on what Gaby wrote in their post, this solution seems to be working for me:
根据 Gaby 在他们的帖子中写的内容，这个解决方案似乎对我有用：
$('input').focus(function(){
var _self = this;
setTimeout(function(){ console.log(_self.select())},100)
})
回答by mmacneill123
I had this problem testing on browsers. Google has this problem, I think Opera too. Firefox, IE ok. I solved it by this.select() on both onclick and onfocus.
我在浏览器上测试时遇到了这个问题。Google 有这个问题，我认为 Opera 也有。火狐，IE 没问题。我通过 onclick 和 onfocus 上的 this.select() 解决了这个问题。
回答by Babak Naffas
Due to the inconsistency that people are mentioning, can you use CSS to simulate your selection? When the input receives the focus, apply CSS colorand background-colorso it looks like it's selected.
由于人们提到的不一致，您可以使用CSS来模拟您的选择吗？当输入接收焦点，应用CSScolor和background-color所以它看起来像它的选择。
