How can I use the event @select to select some text from a paragraph in Vue.js?

问题

I'm using Vue.js with Nuxt in SSR, I would like when I highlight some text to get this text and perform an action on it.

I found a way to do that with some text in <input> but I would like here to be able to @select some text from a paragraph and not from an input.

here is how I did using <input>:

<template>
  <div>
    <input @select="testFunction2()" value="TEXTE TO SELECT">
  </div>
</template> 

mounted() {
  window.addEventListener('select',this.testFunction2,innerHTML)  
},
methods:{
  testFunction2(event) {
    console.log(event.target.value.substring(event.target.selectionStart, event.target.selectionEnd));
  },

I tried to replace in the 'listener' code, the 'value' by 'innerHTML', but it doesn't seem to work,

Thank you!

EDIT : I used the method proposed by Terry and it's working well on a paragraphe. But when I want to highlight some text on an object that I return from a database in a v-loop on the Vue component I get this error : 'Uncaught TypeError: Failed to execute 'contains' on 'Node': parameter 1 is not of type 'Node'. at HTMLDocument.'

This is the object I return on my vue component, the object is actually a html text that i convert to a plain text with v-html :

<li   v-for=" itemJournal in journalContent"> 
 <b-row>
<b-col col lg="10" id="myNoteList" class="htmlNonUser grey-text text- 
darken-2 myNoteList" style=""><p v-html="itemJournal.content" 
ref="target"> </p> 
</b-col>
</b-row>


  mounted:function(){
     document.addEventListener('mouseup', event => {
    if (event.target === this.$refs.target || 
  event.target.contains(this.$refs.target))
    this.testFunction1();
  });
  },

  testFunction1(event){

console.log(window.getSelection().toString());
 },

回答1:

The select event is only supported by input-like elements. If you want to get the selected text within regular elements, simply listen to the mouseup event. The mouseup event should call a function where you simply call window.getSelection().toString() to retrieve the selected text.

In the example below, we bind the mouseup listener to the document, and perform additional filtering within the event handler so that only an element of interest (in this case, this.$refs.target) will trigger the callback that gets the selection:

new Vue({
  el: '#app',
  mounted() {
    document.addEventListener('mouseup', event => {
      if (event.target === this.$refs.target || event.target.contains(this.$refs.target))
        this.testFunction();
    });
  },
  methods: {
    testFunction() {
      console.log(window.getSelection().toString());
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input @select="testFunction" value="Text to select" />
  <p ref="target">Lorem ipsum dolor sit amet</p>
</div>

Update: Based on your answer, you will either want to update what the event.target is compared against (e.g. if you don't want any selection to trigger testFunction()), or leave the if conditional out completely:

document.addEventListener('mouseup', event => {
    this.testFunction1();
});

回答2:

I'm unclear on whether you want to react to a selection inside the input or elsewhere in the document. Assuming inside the input:

Listen to mouseup event.
Pass the event itself with $event.
getSelection() doesn't work on input values, so use selectionStart and selectionEnd to get the selection.

new Vue({
  el: '#app',
  methods: {
    logSelectionWithinInput(e) {
      var selection = e.target.value.substring(
        e.target.selectionStart,
        e.target.selectionEnd
      );
      console.log(selection);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input @mouseup="logSelectionWithinInput($event)" value="Text to select" />
</div>

来源：https://stackoverflow.com/questions/54215429/how-can-i-use-the-event-select-to-select-some-text-from-a-paragraph-in-vue-js

标签

javascript

Vue.js