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

Question

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

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

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

Answer 1

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

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

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

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

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

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

Answer 2

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

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

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

Answer 3

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

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

Answer 4

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

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

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

});

Answer 5

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

/*
 * 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;
        }
    }
}

Это может привести к значительным улучшениям (я особенно ненавижу изобилие try ... catchблоки) но это хорошая отправная точка.Под «узлом» я подразумеваю элемент из дерева DOM.

Answer 6

Выбор определяется объектом диапазона в DOM - поэтому вы должны работать с ними (document.createRange или document.createTextRange).См. Эту ветку SO: Выбор текста в элементе (сродни выделению мышью)

Answer 7

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

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

Answer 8

Working demo

Если вы говорите только о нажатии, а не о выделении внутри какого-либо div.Это было бы что-то вроде этого:

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