Текстовое поле выбрать все / разместить курсор с помощью jQuery - PullRequest
Новая
       22

Текстовое поле выбрать все / разместить курсор с помощью jQuery

2 голосов
/ 06 марта 2012

У меня есть текстовое поле в форме редактирования, которое предварительно заполнено значением. Я хотел бы дать ему следующее поведение:

  • щелчок внутри текстового поля автоматически выделяет все содержимое
  • Повторный щелчок внутри области отменяет выделение всего содержимого и помещает курсор в положение, в котором пользователь нажимает

Вот мой код: 

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

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

Теперь, когда пользователь щелкает поле, выделяется весь текст, но при повторном щелчке весь текст по-прежнему выделен. Любые идеи, как я могу отменить выделение текста по второму щелчку и поместить курсор?

Ответы [ 3 ]

3 голосов
/ 06 марта 2012

как то так? 

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

   $(".clickToSelect").blur(function(){
        $(this).removeClass("click-selectall");
    })
2 голосов
/ 06 марта 2012 
$(".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);
});

Скрипка

1 голос
/ 06 марта 2012 
$.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();
}

Оба плагина .use it.

...