Как выбрать текст интервала при нажатии?

Ответ 1

Рабочая демонстрация: http://jsfiddle.net/dystroy/V97DJ/

$('.unc_path').click(function (){
    var text = $(this).text();
    var $input = $('<input type=text>');
    $input.prop('value', text);
    $input.insertAfter($(this));
    $input.focus();
    $input.select();
    $(this).hide();
});​

Идея (см. комментарий выше) состоит в том, чтобы динамически заменить диапазон на вход, только кросс-браузерный способ, который я знаю, чтобы выделить текст.

Обратите внимание, что это только половина пути, поскольку вы, вероятно, хотите отменить выбор, стиль для удаления границы и т.д.

И я также должен уточнить, что вход, в отличие от диапазона, не может охватывать несколько строк.

Я не думаю, что это может/должно использоваться в реальном приложении, за исключением особого.

EDIT: новая версия: http://jsfiddle.net/dystroy/A5ZEZ/

В этой версии текст возвращается в нормальное состояние, когда фокус теряется.

$('.unc_path').click(function (){
    var text = $(this).text();
    var $this = $(this);
    var $input = $('<input type=text>');
    $input.prop('value', text);
    $input.insertAfter($(this));
    $input.focus();
    $input.select();
    $this.hide();
    $input.focusout(function(){
        $this.show();
        $input.remove();
    });
});​

Ответ 2

Он может быть реализован с использованием родного JavaScript. Рабочая демонстрация jsFiddle. Ваш код может быть таким:

$('.unc_path').click(function (){
    var range, selection;

    if (window.getSelection && document.createRange) {
        selection = window.getSelection();
        range = document.createRange();
        range.selectNodeContents(this);
        selection.removeAllRanges();
        selection.addRange(range);
    } else if (document.selection && document.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(this);
        range.select();
    }
});

Ответ 3

Вы можете использовать CSS, чтобы сделать это проще, чем JS с style="user-select: all;"

добавить cursor: pointer; так что очевидно, что они могут нажать...

Смотрите фрагмент кода:

<p>
Fruit 
<span style="user-select: all; cursor: pointer;">\\apples\oranges\pears</span>
</p>

Ответ 4

Чтобы выбрать конкретный пробел, вам нужен идентификатор, который будет предоставлен для этого диапазона. Кроме того, вам нужно прокрутить список всего доступного диапазона, чтобы получить его.

Давайте рассмотрим это как пример (добавили атрибут id)

  <p>Fruit <span class="unc_path" id="span1">\\apples\oranges\pears</span></p> 

JQuery будет таким:

$('span1').text()  // if you want to take the text
$('span1').html() // if you want to take the html