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

Question

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

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

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

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

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

Answer 1

Какой-то беспорядочный подход, но с его помощью вы можете слушать, нажимая на каждое слово, а затем имитировать поведение. Я не думаю, что 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>

Fiddle

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

Answer 2

Та же концепция, что и у @Sindre, когда мышь наводит курсор на

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

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

Кроме того, я не использовал наведение мыши, а вместо этого щелкнул.Поэтому вы должны нажать

, чтобы выбрать (активировать, сделать цвет красным), а затем выбрать слово. 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(' ')
    }
  }

Answer 3

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

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

Answer 4

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

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

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