highlight text on single click (javascript jquery html)

问题

When you double click on a word in all browsers, they automatically highlight the word under the click. But is it possible to find a way to have the exact same thing happen on a single click?

I imagine things involved in this might be: - TextRange stuff; - Reacting to onclick for all paragraphs (or whole body or div), ... but then I have not found anywhere that says how you could tell the browser:

"Hey! Please do that cool thing of highlighting text right under the mouse ... RIGHT NOW ... even though I only single clicked, not double clicked."

Just for clarification: I am not asking to highlight the whole text within a div or paragraph (that would be fairly simple, many explanations are given for that on stackoverflow). Nor am I wanting to do anything like insert a billion spans for each word. I am hoping to find the exact same functionality you get when a double click on text occurs in a browser, but for a single click.

Yes, I plan to do something with the selected text then.

回答1:

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

The browser may restrict this behavior. For instance, if you attempted to .click() a different element by diverting or performed another event. The following answer may also help there:

Javascript with jQuery: Click and double click on same element, different effect, one disables the other

回答2:

Kind of messy approach, but using this you can listen to click on each word and then simulate the behavior. I do not think dblclick() will simulate a native double click, but using this you approach you might be able to achieve what you want.

Script:

    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/

回答3:

I'm going to go ahead and say that it's not possible.

Javascript interacts with the DOM tree, you can interact with elements but not with the text itself. The only way i think it would be remotely possible (beside drowning your html code in span tags) is to do it dynamically: reading text nodes and splitting the words in spans.

回答4:

Same conception as @Sindre, when mouse hover on the < p >, split the text into words, and use to render them. When click on these < span >, hightlight them.

In my jsfiddle below, click one word, all the same words are highlighted. You can change how compare to set chosen, eg. compare with index, not word itself, to highlight single words alone.

Besides, I didn't use mouseover, but click instead. So you should click < p > to select (active, make color to be red) it, then choose a word. jsfiddle here

// 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(' ')
    }
  }

来源：https://stackoverflow.com/questions/9657937/highlight-text-on-single-click-javascript-jquery-html

标签

javascript

html

text

highlight

textrange