什么是香草JS或jQuery解决方案,将选择一个文本框的所有内容时,文本框接收焦点?
当前回答
我知道这里已经有很多答案了——但这一个到目前为止还没有找到;一个解决方案,也与ajax生成的内容:
$(function (){
$(document).on("focus", "input:text", function() {
$(this).select();
});
});
其他回答
$(document).ready(function() {
$("input:text")
.focus(function () { $(this).select(); } )
.mouseup(function (e) {e.preventDefault(); });
});
这不仅仅是Chrome/Safari的问题,我在Firefox 18.0.1中也遇到了类似的问题。有趣的是,这不会发生在MSIE!这里的问题是第一个鼠标点击事件强制取消选择输入内容,所以忽略第一个事件。
$(':text').focus(function(){
$(this).one('mouseup', function(event){
event.preventDefault();
}).select();
});
timeOut方法会导致一种奇怪的行为,并且阻塞每个鼠标升起事件,您无法删除再次单击输入元素的选择。
像@Travis和@Mari一样,我想在用户点击时自动选择,这意味着防止鼠标起动事件的默认行为,但不阻止用户四处点击。我提出的解决方案基于鼠标点击所涉及的事件顺序,适用于IE11、Chrome 45、Opera 32和Firefox 29(这些都是我目前安装的浏览器)。
当你点击一个没有焦点的文本输入时,你会得到这些事件(以及其他):
mousedown:响应你的点击。默认处理在必要时提高焦点并设置选择开始。 focus:作为鼠标按下的默认处理的一部分。 mouseup:完成你的点击,其默认处理将设置选择结束。
单击已具有焦点的文本输入时,将跳过焦点事件。正如@Travis和@Mari都敏锐地注意到的那样,只有当焦点事件发生时,才需要阻止默认的mouseup处理。然而,由于没有“焦点没有发生”事件,我们需要推断这一点,这可以在mousedown处理程序中完成。
@Mari的解决方案需要导入jQuery,这是我想避免的。@Travis的解决方案通过检查document.activeElement来做到这一点。我不知道为什么他的解决方案不能跨浏览器工作,但有另一种方法来跟踪文本输入是否有焦点:简单地跟随它的焦点和模糊事件。
下面是适合我的代码:
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();
});
});
我在某个地方播种了这个,工作得很完美!
$('input').on('focus', function (e) {
$(this)
$(element).one('mouseup', function () {
$(this).select();
return false;
}) .select();
});
推荐文章
- 如何将“camelCase”转换为“Camel Case”?
- 我们可以在另一个JS文件中调用用一个JavaScript编写的函数吗?
- 如何使用JavaScript重新加载ReCaptcha ?
- jQuery。由于转义了JSON中的单引号,parseJSON抛出“无效JSON”错误
- 在JavaScript关联数组中动态创建键
- Xcode 10的对象库去哪了?
- ReactJS和公共文件夹中的图像
- 在React Native中使用Fetch授权头
- 为什么我的球(物体)没有缩小/消失?
- 如何使用jQuery检测页面的滚动位置
- if(key in object)或者if(object. hasownproperty (key)
- 一元加/数字(x)和parseFloat(x)之间的区别是什么?
- angularjs中的compile函数和link函数有什么区别
- 删除绑定中添加的事件监听器
- 如何在JSON中使用杰克逊更改字段名