选择文本框接收焦点时的所有内容(香草JS或jQuery)

什么是香草JS或jQuery解决方案，将选择一个文本框的所有内容时，文本框接收焦点?

339511 次浏览
小开
最佳答案 
$(document).ready(function() {
$("input:text").focus(function() { $(this).select(); } );
});
小开 

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

小开 
$(document).ready(function() {
$("input[type=text]").focus().select();
});
小开 
$(document).ready(function() {
$("input:text")
.focus(function () { $(this).select(); } )
.mouseup(function (e) {e.preventDefault(); });
});
小开

这里的答案在某种程度上帮助了我，但当我在Chrome中单击向上/向下按钮时，我在HTML5数字输入字段上遇到了一个问题。

如果你点击其中一个按钮，并将鼠标放在按钮上，这个数字就会不断变化，就像你一直按住鼠标按钮一样，因为鼠标被扔掉了。

我通过删除mouseup处理程序来解决这个问题，一旦它被触发，如下所示:

    $("input:number").focus(function () {
var $elem = $(this);
$elem.select().mouseup(function (e) {
e.preventDefault();
$elem.unbind(e.type);
});
});

希望这能在未来帮助到人们…

小开

我的解决办法是使用暂停。看起来还行

$('input[type=text]').focus(function() {
var _this = this;
setTimeout(function() {
_this.select();
}, 10);
});
小开

这个会有用的，试试这个

<input id="textField1" onfocus="this.select()" onmouseup="return false" />

可以在Safari/IE 9和Chrome上运行，但我没有机会在Firefox上测试。

小开

这不仅仅是Chrome/Safari的问题，我在Firefox 18.0.1中也遇到了类似的问题。有趣的是，这不会发生在MSIE!这里的问题是第一个强制取消选择输入内容的mouseup事件，所以忽略第一个事件。

$(':text').focus(function(){
$(this).one('mouseup', function(event){
event.preventDefault();
}).select();
});

timeOut方法会导致一种奇怪的行为，并且阻塞每个鼠标升起事件，您无法删除再次单击输入元素的选择。

小开

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

看看这个例子:

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

来源:CSS技巧， 中数

小开

通过加入一些函数调用，我可以稍微改进Zach的回答。这个答案的问题是它完全禁用了onMouseUp，从而阻止你在文本框中点击，一旦它有焦点。

这是我的代码:

<input type="text" onfocus="this.select()" onMouseUp="javascript:TextBoxMouseUp();" onMouseDown="javascript:TextBoxMouseDown();" />


<script type="text/javascript">
var doMouseUp = true;
function TextBoxMouseDown() {
doMouseUp = this == document.activeElement;
return doMouseUp;
}
function TextBoxMouseUp() {
if (doMouseUp)
{ return true; }
else {
doMouseUp = true;
return false;
}
}
</script>

这比扎克的回答略有进步。它在IE中工作得很完美，在Chrome中完全不能工作，在FireFox中则是交替成功(几乎每隔一次)。如果有人有一个想法，如何使它可靠地工作在FF或Chrome，请分享。

总之，我想我应该分享我所能做的让这一切更美好。

小开 
onclick="this.focus();this.select()"
小开

我知道内联代码是不好的风格，但我不想把它放入.js文件。 不用jQuery也能工作!< / p > 

<input type="text" value="blah blah" onfocus="this.select(); this.selAll=1;" onmouseup="if(this.selAll==0) return true; this.selAll=0; return false;"></input>
小开 
$('input').focus(function () {
var self = $(this);
setTimeout(function () {
self.select();
}, 1);
});

编辑:根据@DavidG的请求，我不能提供详细信息，因为我不确定为什么这样工作，但我相信这与向上或向下传播的焦点事件或任何它所做的事情有关，输入元素获得它所接收的焦点通知。设置timeout会给元素一点时间来意识到它已经这样做了。

小开

如果你将事件链接在一起，我相信它消除了使用.one的需要，就像在这个线程的其他地方建议的那样。

例子:

$('input.your_element').focus( function () {
$(this).select().mouseup( function (e) {
e.preventDefault();
});
});
小开

这也适用于iOS:

<input type="text" onclick="this.focus(); this.setSelectionRange(0, 9999);" />

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select

小开

我的解决方案是:

var mouseUp;
$(document).ready(function() {
$(inputSelector).focus(function() {
this.select();
})
.mousedown(function () {
if ($(this).is(":focus")) {
mouseUp = true;
}
else {
mouseUp = false;
}
})
.mouseup(function () {
return mouseUp;
});
});

因此，鼠标通常会工作，但不会在通过输入获得焦点后取消选择

小开

像@Travis和@Mari一样，我想在用户单击时自动选择，这意味着防止mouseup事件的默认行为，但不阻止用户四处单击。我提出的解决方案基于鼠标点击所涉及的事件顺序，适用于IE11、Chrome 45、Opera 32和Firefox 29(这些都是我目前安装的浏览器)。

当你点击一个没有焦点的文本输入时，你会得到这些事件(以及其他):

  • mousedown:在响应你的点击。默认处理在必要时引发focus并设置选择开始。
  • focus:作为mousedown默认处理的一部分。
  • mouseup:完成单击，默认处理将设置选择结束。

当你点击一个已经有焦点的文本输入时，focus事件将被跳过。正如@Travis和@Mari都敏锐地注意到的那样，只有在focus事件发生时，才需要阻止mouseup的默认处理。然而，由于没有“focus没有发生”;事件，我们需要推断这一点，这可以在mousedown处理程序中完成。

@Mari的解决方案需要导入jQuery，这是我想避免的。@Travis的解决方案通过检查document.activeElement来做到这一点。我不知道为什么他的解决方案不能跨浏览器工作，但有另一种方法来跟踪文本输入是否有焦点:简单地跟踪它的focus和blur事件。

下面是适合我的代码:

  function MakeTextBoxAutoSelect(input)
{
var blockMouseUp = false;
var inputFocused = false;


input.onfocus =
function ()
{
try
{
input.selectionStart = 0;
input.selectionEnd = input.value.length;
}
catch (error)
{
input.select();
}


inputFocused = true;
};


input.onblur =
function ()
{
inputFocused = false;
};


input.onmousedown =
function ()
{
blockMouseUp = !inputFocused;
};


input.onmouseup =
function ()
{
if (blockMouseUp)
return false;
};
}

我希望这对某人有所帮助。:-）

小开

我知道这里已经有很多答案了——但这一个到目前为止还没有找到;一个解决方案，也与ajax生成的内容:

$(function (){
$(document).on("focus", "input:text", function() {
$(this).select();
});
});
小开

注意:如果你在ASP中编程。NET中，您可以使用ScriptManager运行脚本。c#中的RegisterStartupScript:

ScriptManager.RegisterStartupScript(txtField, txtField.GetType(), txtField.AccessKey, "$('#MainContent_txtField').focus(function() { $(this).select(); });", true );

或者在其他答案中建议的HTML页面中输入脚本。

小开

HTML:

var textFiled = document.getElementById("text-filed");
textFiled.addEventListener("focus", function() { this.select(); });
Enter Your Text : <input type="text" id="text-filed" value="test with filed text">

Using JQuery :

$("#text-filed").focus(function() { $(this).select(); } );

使用React JS:

在各自的组成部分-

<input
type="text"
value="test"
onFocus={e => e.target.select()}
/>
小开

什么是JavaScript或jQuery解决方案，将<强>选择文本框的所有内容时，文本框接收<强>焦点?

您只需要添加以下属性:

onfocus="this.select()"

例如:

<input type="text" value="sometext" onfocus="this.select()">

(说实话，我不知道你为什么还需要其他东西。)

小开

我在某个地方播种了这个，工作得很完美!

            $('input').on('focus', function (e) {
$(this)
$(element).one('mouseup', function () {
$(this).select();
return false;
})                        .select();
});
小开

这对我来说很管用(因为它不是在回答中，而是在评论中)

 $("#textBox").focus().select();
小开

我有点晚了，但这在IE11, Chrome, Firefox中工作完美，没有混乱的鼠标(没有JQuery)。

inputElement.addEventListener("focus", function (e) {
var target = e.currentTarget;
if (target) {
target.select();
target.addEventListener("mouseup", function _tempoMouseUp(event) {
event.preventDefault();
target.removeEventListener("mouseup", _tempoMouseUp);
});
}
});

提交答案