Как я могу получить доступ к выбранному пользователем тексту внутри элемента ввода?

Question

Я хочу получить доступ к тексту в компоненте ElInput через Javascript в Electron. Согласно mozilla невозможно получить доступ к информации внутри html ввода или текстового поля через window.getSelection.

Я безуспешно пытался получить доступ к выделению с предложенным selectionStart

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

Учитывая, что это не работает, что мне нужно сделать, чтобы получить текст в моем выделении внутри моего эль-вход ?

Answer 1

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

Answer 2

Оформить заказ на это короткое видео Я сделал по предоставленной вами ссылке ELInput, общее объяснение:

Не видеть ваш html немного сложно, но Я предполагаю, что у вас даже нет ввода с идентификатором 'input', который запрашивает ваш javascript код:

const input = document.getElementById("input")

Глядя на html по предоставленной вами ссылке ElInput эти входы имеют класс el-input__inner, вы можете выбрать вход по классу с помощью

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

, но это вернет массив элементов , вам нужно убедиться, что вы выбираете тот, который вам нужен (вы можете выбрать по Id, если вы действительно добавили тег id к элементу ввода, также по этой причине вы видите [1] в видео, оно выбирает элемент в этой позиции массива).

оттуда вы можете выбрать свой текст внутри элемента ввода, и из javascript получить диапазон выделения с помощью: input.selectionStart и input.selectionEnd

Имея их, вы можете теперь получить подстроку wi th input.value.substr(input.selectionStart, input.selectionEnd) и оттуда делайте все, что вам нужно с текстом.

Answer 3

Вы можете использовать .native обработчики событий, как описано в Vue. js + Пользовательский интерфейс элемента: получить «event.target» при изменении , а затем selectionStart/End базового HTML элемент будет работать:

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/element-ui@2.13.0/lib/index.js"></script>
<div id="app">
<el-input v-model="input" @mouseup.native="dothing"></el-input>
</div>

Answer 4

На основании этого ответа: Как получить выделенный текст из элемента управления текстовым полем с помощью javascript, вы можете использовать Document.querySelectorAll () , чтобы получить все elements, что вам нужно. Вы можете использовать class names, ids или tag names и так далее. Затем выполните итерацию по ним с помощью forEach и добавьте EventListener , который вам нужен. Внутри forEach l oop вы можете делать что угодно с любым данным element

ОБНОВЛЕНИЕ К сожалению, первое решение не сработало в Firefox. (см. далее) Это решение должно работать в большем количестве браузеров.

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">

Первое решение (скрыто в "Показать фрагмент кода") к сожалению window.getSelection() не работало в Firefox , Я оставлю это решение здесь только потому, что, возможно, когда-нибудь оно сработает, и тогда это будет лучшим решением.

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">