Question

我正在创建一个简单的网页，该网页将允许用户将网址链接粘贴到输入框中。他们将其粘贴后，页面将自动将其发送到该特定页面。

我不需要按钮，只是他们粘贴的一种方式，然后页面会加载他们粘贴的网址。

<template>
    <div class="importEvent">
        <img class="imageSize" src="~/assets/Missing Icons/facebook.svg" alt="Facebook">
        <InputComponent placeholder="Paste your facebook event here" v-model="facebookPaste" class="inputFacebook"></InputComponent>

        <div class="manualOption">
            or <nuxt-link to="/create-event" class="manualLink">create manually</nuxt-link>
        </div>
    </div>
</template>

如果有人可以帮助，将不胜感激。

非常感谢。

Answer 1

我认为您的问题有点尴尬，您可以设置内部并在输入框获得一些值重定向到另一页时定期检查输入框的值

 var input_text="";
 var time=setInterval(function(){
     input_text=document.getElementsByTagName("InputComponent")[0].getAttribute("value");
          if(input_text.length>0)
          {
           //redirect code goes here
          clearInterval(time);
          },500);

在这里，我假设您的元素索引为0；也可以完成keybord eventListner，但是如果在鼠标的帮助下输入gose，则可能会出现一些问题。

Answer 2

我不知道您的InputComponent是什么，但是如果使用<input>，则可以尝试以下代码：

<template>
    <div class="importEvent">
        <img class="imageSize" src="~/assets/Missing Icons/facebook.svg" alt="Facebook">
        <input type="text" placeholder="Paste your facebook event here" class="inputFacebook" @paste="pasteLink($event)"/>

        <div class="manualOption">
            or <nuxt-link to="/create-event" class="manualLink">create manually</nuxt-link>
        </div>
    </div>
</template>
<script>
export default {
  methods: {
    pasteLink: function(evt) {
      const url = evt.clipboardData.getData("text") || "";
      // you can check url by regexp
      location.href = url; // go away to url
    }
}
</script>

该代码仅满足您的要求-粘贴网址后。不是在输入中写文本时，而是粘贴之后。希望对您有帮助。

Answer 3

我找到了一种使这项工作有效的方法。

我将我必须使用的<InputComponent>标记更改为普通的<input>标记，然后添加了一个@change，它将链接到我创建的方法。

下面是我所做的。

<input placeholder="Paste your facebook event here" v-model="facebookPaste" @change="pastedUrl()" class="inputFacebook" onkeypress="return false;">

export default {
    data() {
        return {
            facebookPaste: ''
        }
    },

    methods: {
        pastedUrl: function(){
            location.replace(this.facebookPaste)
        }
    }
}

onkeypress="return false;"：允许我仅粘贴而不输入我想要的任何内容。

在输入框中输入链接后，自动重定向到另一个页面

3 个答案: