什么是香草JS或jQuery解决方案,将选择一个文本框的所有内容时,文本框接收焦点?
当前回答
这个会有用的,试试这个
<input id="textField1" onfocus="this.select()" onmouseup="return false" />
可以在Safari/IE 9和Chrome上运行,但我没有机会在Firefox上测试。
其他回答
这个会有用的,试试这个
<input id="textField1" onfocus="this.select()" onmouseup="return false" />
可以在Safari/IE 9和Chrome上运行,但我没有机会在Firefox上测试。
onclick="this.focus();this.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);
});
}
});
像@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;
};
}
我希望这对某人有所帮助。: -)
我在某个地方播种了这个,工作得很完美!
$('input').on('focus', function (e) {
$(this)
$(element).one('mouseup', function () {
$(this).select();
return false;
}) .select();
});
推荐文章
- 在数组中获取所有选中的复选框
- 如何为Firebase构建云函数,以便从多个文件部署多个函数?
- 如何发送推送通知到web浏览器?
- AngularJS:工厂和服务?
- js:将一个组件包装成另一个组件
- 父ng-repeat从子ng-repeat的访问索引
- JSHint和jQuery: '$'没有定义
- 模仿JavaScript中的集合?
- 用JavaScript验证电话号码
- 如何在HTML5中改变视频的播放速度?
- 谷歌地图API v3:我可以setZoom后fitBounds?
- 用jQuery检查Internet连接是否存在?
- 如何使用滑动(或显示)函数在一个表行?
- ES6/2015中的null安全属性访问(和条件赋值)
- 与push()相反;