выделить текст одним щелчком мыши (javascript jquery html)

Когда вы дважды щелкаете слово во всех браузерах, они автоматически выделяют слово при щелчке. Но можно ли найти способ, чтобы в точности происходило одно и то же одним щелчком мыши?

Я предполагаю, что в этом могут быть задействованы: - материал TextRange; - Реагируя на onclick для всех абзацев (или всего тела или div), ... но тогда я не нашел нигде, где говорилось бы, как вы могли бы сказать браузеру:

«Эй! Пожалуйста, сделайте эту классную вещь - выделите текст прямо под мышью ... ПРЯМО СЕЙЧАС ... даже если я щелкнул только один, а не дважды».

Просто для пояснения: я не прошу выделить весь текст в блоке или абзаце (это было бы довольно просто, для этого дается много объяснений в stackoverflow). Я также не хочу делать что-либо вроде вставки миллиарда интервалов для каждого слова. Я надеюсь найти ту же функциональность, что и при двойном щелчке текста в браузере, но для одного щелчка.

Да, тогда я планирую что-то сделать с выделенным текстом.


javascript text html highlight textrange
person Nicholas Petersen    schedule 11.03.2012    source источник

Ответы (4)


arrow_upward
0
arrow_downward 

$('#content').click(function() {
    $(this).dblclick();
});

Браузер может ограничить такое поведение. Например, если вы попытались .click () использовать другой элемент, перенаправив или выполнив другое событие. Здесь также может помочь следующий ответ:

Javascript с jQuery: щелкните и дважды щелкните на одном элементе, разные эффекты, один отключает другой

person Aram Kocharyan    schedule 11.03.2012
comment
Спасибо, Арам, очень интересно (и просто). К сожалению, у меня не сработало. При отладке я видел, что функция вызывается при каждом щелчке, так что проблема не в этом. Так что это просто не сработало (пробовали в Chrome и IE). Вероятно, это связано с тем, что Мантион сказал ниже: я не думаю, что dblclick () будет имитировать собственный двойной щелчок. Проницательное наблюдение и, вероятно, почему это не сработало. Может быть способ имитировать двойной щелчок? - person Nicholas Petersen; 12.03.2012
comment
В этом ответе он задерживает событие двойного щелчка. Я думаю, что браузер подозревает нечестную игру, когда одновременно вызываются два обработчика событий. - person Aram Kocharyan; 14.03.2012

arrow_upward
1
arrow_downward

Вид беспорядочного подхода, но с его помощью вы можете слушать, нажимать на каждое слово, а затем имитировать поведение. Я не думаю, что dblclick () будет имитировать собственный двойной щелчок, но, используя этот подход, вы сможете добиться того, чего хотите.

Сценарий:

    var words = $("p:first").text().split(" ");
    var text = words.join("</div> <div>");
    $("p:first").html("<div>" + text + "</div>");
    $("div").click(function () {
       $(this).css("background-color","yellow");
    });

HTML

    <p> word1 word2 word3 </p>

Скрипка

http://jsfiddle.net/tbpJT/1/

person Sindre    schedule 11.03.2012
comment
Интересный подход, я обновил его с помощью промежутков jsfiddle.net/kumiau/tbpJT/2 - person kumiau; 11.03.2012
comment
Спасибо. Но меня буквально пугает мысль изменить страницу (под капотом), чтобы добавить бесчисленные промежутки или что-то еще. Тем не менее, будучи не слишком хорош в jQuery, я кое-что узнал из этого функционального примера. - person Nicholas Petersen; 12.03.2012

arrow_upward
0
arrow_downward

Я собираюсь сказать, что это невозможно.

Javascript взаимодействует с деревом DOM, вы можете взаимодействовать с элементами, но не с самим текстом. Я думаю, что единственный способ, которым это было бы возможно удаленно (помимо утопления вашего html-кода в тегах span), - это делать это динамически: чтение текстовых узлов и разделение слов на промежутки.

person kumiau    schedule 11.03.2012
comment
Но вот о чем не следует забывать: все браузеры делают это безупречно по двойному щелчку, так что у них есть абсолютная возможность. Я уверен, что сам браузер - это то, что на самом деле обрабатывает выделение текста, в отличие от ОС (в этом случае все было бы туманнее). Таким образом, у них явно есть команда для этого, в зависимости от того, где был указатель мыши. Тем не менее, я понимаю это мнение. Я смотрел и смотрел ... - person Nicholas Petersen; 12.03.2012
comment
Браузер - это приложение, вы можете делать с собственными приложениями многое, чего нельзя сделать с помощью javascript. Я пробовал использовать двойной щелчок в других приложениях, и он работает точно так же, поэтому я думаю, что это больше на стороне ОС, чем на самом браузере. - person kumiau; 12.03.2012

arrow_upward
0
arrow_downward

Та же концепция, что и у @Sindre, при наведении курсора мыши на ‹p> текст разбивается на слова и используется для их рендеринга. Щелкнув на этих ‹span>, выделите их.

В моем jsfiddle ниже щелкните одно слово, все те же слова выделены. Вы можете изменить способ сравнения с выбранным набором, например. сравните с индексом, а не с самим словом, чтобы выделить только отдельные слова.

Кроме того, я не использовал наведение мыши, а вместо этого нажимал. Итак, вы должны щелкнуть ‹p>, чтобы выбрать (активировать, сделать цвет красным), затем выбрать слово. jsfiddle здесь

// main code
  <div 
    @click='select'
    :class='cls'>
    <p v-if='!split'> {{data}} </p>
    <p v-else>
      <span
        v-for='word in spdata'
        :class='chosen(word)'
        @click='choose'>
      {{word}}
      </span>
    </p>
  </div>
// --------------------
  methods: {
    select (e) {
      this.split = true
    },
    choose (e) {
      let el = e.srcElement
      this.chosenWord = el.innerText
      console.log(this.chosenWord)
    },
    chosen (word) {
        if (word.trim() === this.chosenWord.trim()) {
        return ['chosen']
      } else {
        return []
      }
    }
  },
  computed: {
    spdata () {
        return this.data.split(' ')
    }
  }
person Plasmatium    schedule 18.06.2017