Select textarea javascript 和 vue 标签内的文本

Question

我一直在研究一个我还没有解决的问题。我所拥有的是文本区域中的文本，开头为 [ 且结尾为 ] 的单词将得到 selected然后跳转到下一个单词并 select 它。

所以我设法让它得到括号内的文本，但我如何移动 select 该文本并跳转到下一个单词。我有一个使用 setSelectionRange() 的想法；一些如何。

到目前为止，这是我的代码：

var driftError = ['Move over and select [this] then write something and select [this here]'];

Vue.component('template-maker',{
    template: '\
    <div>\
    <b>Select template</b><br>\
    <select id="templates" v-on:change="appendData">\
<option selected disabled></option>\
<option>Error template</option>\
    </select>\<br>\
    <b>Text</b><br>\
    <textarea id="templateText" v-on:click="test"/>\
    </div>\
    ',
    methods:{
        appendData: function(){
            var templateText = document.getElementById('templateText');
            templateText.innerHTML = driftError[0];
        },
        test: function(){
    if(templateText.value.length != 0){
      var markupExtract = driftError[0].split('[');
      var inputLen = templateText.value.length;
      for (var i = 1; i < markupExtract.length; i++) {
          alert(markupExtract[i].split(']')[0]);
                        //templateText.setSelectionRange(0,markupExtract[i].split(']')[0].length));
      }
    }
        }
    }
})

new Vue({
    el: '#template',
})

你可以在这里测试： https://jsfiddle.net/amrw0rer/

Answer 1

我不认为这可以像您想象的那样以简单的方式完成（只需设置指针等）。如果不对您的示例进行重大更改，您将无法实现您想要的。我准备了一个非常非常非常小的例子来说明如何做到这一点。没有检查，永远不应该像我以任何有成效的方式那样使用它 - 它只是作为一个示例来阐明这个想法。

https://jsfiddle.net/amrw0rer/1/

您实际上可以而且可能应该做的是将输入字段放在不可编辑的文本部分之间。该示例针对一个输入显示它 - 由于字符串拆分部分，它不适用于两个输入。

增强功能是将输入字段始终置于您当前允许更改的位置。

 <span>{{ textBeforeInput }}</span><input v-model="newText" /><span>{{ textAfterInput}}</span>

您可能想要将输入包装到一个表单中并监听提交事件以更改为下一个指针。然后您唯一需要做的就是更新 textBefore 和 textAfterInput 值并将 newText 保存到您需要的任何地方。

Select textarea javascript 和 vue 标签内的文本

Select text within tags in textarea javascript and vue

javascript

textarea

vue.js