Question

我在编辑表单中有一个预先填充了值的文本字段。我想给它以下行为：

在文本字段内单击会自动选择整个内容
在区域内再次单击取消选择所有内容并将光标置于用户单击的位置

这是我的代码：

// HTML
<input type="text" class="clickToSelect" value="myText" />

// jQuery
$(".clickToSelect").click(function(){
    $(this).select();
})

现在，当用户单击该字段时，将选中所有文本，但是当他们再次单击时，仍然会选中所有文本。有关如何在第二次单击时取消选择文本并放置光标的任何想法吗？

Answer 1

这样的事情？

    $(".clickToSelect").click(function(){
        if(!$(this).hasClass("click-selectall")){
           $(this).addClass("click-selectall");
           $(this).select();
        }
    });

   $(".clickToSelect").blur(function(){
        $(this).removeClass("click-selectall");
    })

Answer 2

$(".clickToSelect").one('click', function(){
    $(this).select();
})

Working fiddle here.

更新：多次点击工作：

$(".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);
});

Fiddle

Answer 3

$.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();
}

两者都是插件。使用它。

文本字段用jQuery选择全部/放置光标

3 个答案: