How do I access the user selected text within an element ui input?

Question

I want to access the text within an ElInput component via Javascript in Electron. According to mozilla it is impossible to access information within an html input or textfield via window.getSelection.

I unsuccessfully tried to access the selection with the proposed selectionStart

const input = document.getElementById("input")
alert(input.selectionStart.toString)

Given that this doesn't work, what do I have to do, to get the text in my selection within my el-input?

Answer 1

Based on this answer: How to get selected text from textbox control with javascript you can use Document.querySelectorAll() to get all elements you need. You can use class names, ids or tag names and so on. Then iterate over them with forEach and add the EventListener you need. Inside the forEach loop you can do whatever you like with any given element

UPDATE Unfortunately the first solution did not work in Firefox. (see further down) This solution should work in more browsers.

var mySpecialSelect = function(element){
  element.addEventListener('mouseup', function () {
    let startPos = element.selectionStart;
    let endPos = element.selectionEnd;        
    let field_value = element.value;
    let selectedText = field_value.substring(startPos,endPos);

    if(selectedText.length <= 0) {
      return; // stop here if selection length is <= 0
    }
    
    // log the selection
    console.log(selectedText);
  
    // you can use "element" or "this" to do whatever like toggle a class name
    element.classList.toggle('used-this-element'); 
  });
};

var textAreaElements = document.querySelectorAll('textarea');
[...textAreaElements].forEach(mySpecialSelect);

var inputElements = document.querySelectorAll('input');
[...inputElements].forEach(mySpecialSelect);

textarea,
input {
  border: solid 2px gray;
}

input {
  display: block;
  width: 100%;
}

.used-this-element {
    border: solid 2px orange;
}

<textarea  rows="4" cols="50">Select some text from here and check the console</textarea>
<textarea rows="4" cols="50">Another text Box, Select some text from here and check the console</textarea>

<input type="text" value="Select or change this value">

First solution (hidden in the "Show code snippet") unfortunately window.getSelection() did not work in Firefox. I'll keep this solution here just because maybe someday it will work and then this would be the nicer solution.

var mySpecialSelect = function(element){
  element.addEventListener('mouseup', function () {
    if(window.getSelection().toString().length <= 0) {
      return; // stop here if selection length is <= 0
    }
    
    // log the selection
    console.log(window.getSelection().toString());
  
    // you can use "element" or "this" to do whatever like toggle a class name
    element.classList.toggle('used-this-element'); 
  });
};

var textAreaElements = document.querySelectorAll('textarea');
[...textAreaElements].forEach(mySpecialSelect);

var inputElements = document.querySelectorAll('input');
[...inputElements].forEach(mySpecialSelect);

textarea,
input {
  border: solid 2px gray;
}

input {
  display: block;
  width: 100%;
}

.used-this-element {
    border: solid 2px orange;
}

<textarea  rows="4" cols="50">Select some text from here and check the console</textarea>
<textarea  rows="4" cols="50">Another text Box, Select some text from here and check the console</textarea>

<input type="text" value="Select or change this value">

Answer 2

Checkout this short video I have made from the ELInput link you provided, the explanation in general is:

Without seeing your html is a bit hard, but I am guessing you don't even have an input with an id of 'input' which is what your javascript code is querying for:

const input = document.getElementById("input")

Looking at the html on the ElInput link you have provided, those inputs have a class of el-input__inner, you can select the input by class with

const input = document.getElementsByClass("el-input__inner")

but this will return an array of elements, you need to make sure you are selecting the one you need (you can select by Id if you have actually added an id tag to the input element, also this is the reason you see a [1] in the video, it is selecting the element in that position of the array).

from there you can select your text inside the input element, and from javascript get the range of the selection with: input.selectionStart and input.selectionEnd

Having those you can now get the substring with input.value.substr(input.selectionStart, input.selectionEnd) and from there do whatever you need with the text.

Answer 3

You can use .native event handlers as described in Vue.js + Element UI: Get "event.target" at change, and then selectionStart/End of the underlying HTML element will work:

var Main = {
  data() {
    return {
      input: 'Select something.'
    }
  },
  methods: {
    dothing(event) {
      let elem=event.target;
      console.log(elem.value.substring(elem.selectionStart,elem.selectionEnd));
    }
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
<el-input v-model="input" @mouseup.native="dothing"></el-input>
</div>

Answer 4

<input value="try to select some of the text" onclick="console.log(this.value.substring(this.selectionStart, this.selectionEnd))"/>