文本字段使用jQuery选择全部/放置光标
我在编辑表单中有一个文本字段,它预先填充了一个值。我想给它以下的行为:文本字段使用jQuery选择全部/放置光标,jquery,input,selection,Jquery,Input,Selection,我在编辑表单中有一个文本字段,它预先填充了一个值。我想给它以下的行为: 在文本字段内单击会自动选择整个内容 再次在区域内单击将取消选择所有内容,并将光标放置在用户单击的位置 这是我的密码: // HTML <input type="text" class="clickToSelect" value="myText" /> // jQuery $(".clickToSelect").click(function(){ $(this).select(); }) //HTM
- 在文本字段内单击会自动选择整个内容
- 再次在区域内单击将取消选择所有内容,并将光标放置在用户单击的位置
// HTML
<input type="text" class="clickToSelect" value="myText" />
// jQuery
$(".clickToSelect").click(function(){
$(this).select();
})
//HTML
//jQuery
$(“.clickToSelect”)。单击(函数(){
$(this.select();
})
现在,当用户单击该字段时,所有文本都被选中,但当他们再次单击时,所有文本仍被选中。你知道如何在第二次单击时取消选择文本并放置光标吗
$(".clickToSelect").one('click', function(){
$(this).select();
})
更新:多个点击工作:
$(".clickToSelect").click(function(){
$this = $(this); // cache $(this) for better performance
if (!$this.data('selected'))
{
$this.data('selected', true);
$this.select();
}
}).blur(function(){
$this.data('selected', false);
});
像这样的事
$(".clickToSelect").click(function(){
if(!$(this).hasClass("click-selectall")){
$(this).addClass("click-selectall");
$(this).select();
}
});
$(".clickToSelect").blur(function(){
$(this).removeClass("click-selectall");
})
两者都是插件。使用它。one()很好,但第二次不起作用(如果用户单击click away=然后单击)。最后一个解决方案将不起作用。为此,我表示感谢——Mvision提供的解决方案似乎有效,但我认为您的解决方案也很好。遗憾的是,我不能接受两个答案:(不是吹毛求疵,而是对本质上不是真正的数据的东西使用data()属性,这就是为什么我在我的answer@Mvision我知道你是从哪里来的-尽管有人可能会说状态是数据而不是类;)不客气,你是在用它来搜索某个字段吗?
$.fn.slctText = function(start, end){
var field = $J(this);
if( field.createTextRange ){
var selRange = field.createTextRange();
selRange.collapse(true);
selRange.moveStart("character", start);
selRange.moveEnd("character", end);
selRange.select();
} else if( field.setSelectionRange ){
field.setSelectionRange(start, end);
} else {
if( field.selectionStart ){
field.selectionStart = start;
field.selectionEnd = end;
}
}
return $(this);
}
$.fn.setCurPos = function(pos){
$(this).slctText(pos,pos);
$(this).focus();
}