JQuery: есть ли способ выделить текст Div, когда вы нажимаете на него?

С JQuery есть способ выделить/выбрать (например, если кто-то должен был выбрать его с помощью мыши) текст внутри div, на который я нажимаю? а не текстовое поле, просто нормальный div.

Я пытаюсь создать "короткий URL-адрес", где, когда кто-то нажимает на текстовое поле, он выделяет весь текст, но он также НЕ должен позволять людям изменять текст в текстовом поле, но когда текстовое поле отключен, вы не можете выбрать какой-либо текст, поэтому я пытаюсь это сделать, я просто подумал, что div будет проще всего.

Извините, ребята, я не очень хорошо объяснял, что я имел в виду, добавив выше информацию, чтобы уточнить.

ОТВЕТЫ

Ответ 1

Правильно, речь идет не о цветовых фонах, а о выборе текста.

Сначала установите вход для чтения, остановив людей, изменяющих значение:

<input type="text" readonly="readonly" value="ABC" />

Затем с помощью jQuery (или аналогичного) выберите текст после его нажатия:

$('input').click(function() {
    $(this).select(); 
});

Вы должны стилизовать этот ввод, как вам кажется, возможно, чтобы он выглядел как обычный бит текста, взглянуть на этот jsFiddle для дальнейшей демонстрации.

Ответ 2

Вы можете изменить CSS элемента после его нажатия. Что-то вроде (непроверено):

$(".el").click( function() {

  $(".el").css( "color", "red" ).css( "background-color", "yellow" );

});

Ответ 3

$("div.myDiv").click(function() {
   $(this).css("background-color", "yellow");
})

Или вы можете добавить класс:

$("div.myDiv").click(function() {
   if($(this).hasClass("highlited")) {
      $(this).removeClass("highlited");
   } else {
      $(this).addClass("highlited");
   }
}

Ответ 5

Вот быстрый и грязный фрагмент кода jQuery-less, который я собрал некоторое время назад:

/*
 * Creates a selection around the node
 */
function selectNode(myNode){
    // Create a range
    try{ // FF
        var myRange = document.createRange();
    }catch(e){
        try{ // IE
            var myRange = document.body.createTextRange();
        }catch(e){
            return;
        }
    }

    // Asign text to range
    try{ // FF
        myRange.selectNode(myNode);
    }catch(e){
        try{ // IE
            myRange.moveToElementText(myNode);
        }catch(e){
            return;
        }
    }

    // Select the range
    try{ // FF
        var mySelection = window.getSelection();
        mySelection.removeAllRanges(); // Undo current selection
        mySelection.addRange(myRange);
    }catch(e){
        try{ // IE
            myRange.select();
        }catch(e){
            return;
        }
    }
}

Он мог бы использовать много улучшений (я особо ненавижу чрезмерное количество попыток... catch блоков), но это хорошая отправная точка. С "node" я имею в виду элемент из дерева DOM.

Ответ 6

Вы можете использовать текстовое поле и вместо его отключения использовать атрибут 'readonly'

<textarea name="selectable" readonly="readonly" />

Ответ 7

Working demo

Если вы говорите только о нажатии и не выборе внутри любого div. Это будет примерно так:

$("div").click(function()
             {
                $(this).css({"background":"yellow"});
             });

Ответ 8

почему бы просто не использовать css:

div.<someclass>:focus {
    background:yellow;
}