我如何在元素ui输入中访问用户选择的文本？

Question

bounty到期在6天内。该问题的答案有资格获得+ 50声望赏金。Christian想要引起更多关注对此问题。

我想通过Electron中的Javascript访问ElInput组件中的文本。根据mozilla，不可能通过window.getSelection访问html输入或文本字段中的信息。

我未尝试通过建议的selectionStart访问选择

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

鉴于这不起作用，我必须怎么做才能在el-input中获取所选内容的文本？

Answer 1

您可以使用.native中所述的Vue.js + Element UI: Get "event.target" at change事件处理程序，然后基础HTML元素的selectionStart/End将起作用：

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 2

[通过您提供的ELInput链接查看此简短视频，通常的解释是：

没有看到您的html有点困难，但是我想您甚至没有输入ID为'input'的输入，这是您的javascript代码正在查询的内容：

const input = document.getElementById("input")

查看您提供的ElInput链接上的html，这些输入的类别为el-input__inner，您可以使用]按类别选择输入>

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

但是这将返回一个元素数组，您需要确保选择了所需的元素（如果您确实在输入元素中添加了id标记，则可以按ID进行选择，这也是您看到一个视频中的[1]，它正在选择数组中该位置的元素。

从那里您可以在输入元素中选择文本，然后从javascript中通过input.selectionStart和input.selectionEnd获得选择范围

有了这些，您现在可以使用input.value.substr(input.selectionStart, input.selectionEnd)获取子字符串，然后从那里进行文本所需的任何操作。

Answer 3

基于此答案：How to get selected text from textbox control with javascript，您可以使用Document.querySelectorAll()获得所需的全部elements。您可以使用class names，ids或tag names等。然后用forEach遍历它们并添加所需的EventListener。在forEach循环中，您可以使用任何给定的element