Question

我一直在研究一个我尚未解决的问题。我所拥有的是textarea中的文本，并且在结尾处 [在开头] 的单词将被选中，然后跳转到下一个单词并选择它。

所以我设法让它来获取括号内的文本但是如何移动并选择该文本并跳转到下一个单词。我有一个想法，使用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>

您可能希望将输入包装到表单中并侦听submit事件以更改为下一个指针。您需要做的唯一事情就是更新textBefore和textAfterInput值，并将newText保存到您需要的地方。

在textarea javascript和vue中选择标签内的文本

1 个答案: