什么是香草JS或jQuery解决方案,将选择一个文本框的所有内容时,文本框接收焦点?
当前回答
我有点晚了,但这在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);
});
}
});
其他回答
$(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);
});
});
希望这能在未来帮助到人们…
什么是JavaScript或jQuery解决方案,将选择一个文本框的所有内容时,文本框接收焦点?
您只需要添加以下属性:
onfocus="this.select()"
例如:
<input type="text" value="sometext" onfocus="this.select()">
(说实话,我不知道你为什么还需要其他东西。)
我知道这里已经有很多答案了——但这一个到目前为止还没有找到;一个解决方案,也与ajax生成的内容:
$(function (){
$(document).on("focus", "input:text", function() {
$(this).select();
});
});
像@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;
};
}
我希望这对某人有所帮助。: -)
推荐文章
- 窗口。亲近与自我。close不关闭Chrome中的窗口
- 同步和异步编程(在node.js中)的区别是什么?
- 在d3.js中调整窗口大小时调整svg的大小
- 如何将两个字符串相加,就好像它们是数字一样?
- 绑定多个事件到一个监听器(没有JQuery)?
- 在JavaScript中将JSON字符串解析为特定对象原型
- 将字符串“true”/“false”转换为布尔值
- 如何在另一个元素之后添加一个元素?
- 如何使用JavaScript代码获得浏览器宽度?
- event.preventDefault()函数在IE中无法工作
- 为什么优秀的UI设计对某些开发者来说如此困难?
- indexOf()和search()的区别是什么?
- 错误:'types'只能在.ts文件中使用- Visual Studio Code使用@ts-check
- React-Native:应用程序未注册错误
- LoDash:从对象属性数组中获取值数组