在输入框中输入link时自动重定向到另一个页面

Question

我正在创建一个简单的网页，允许用户将网页 url link 粘贴到输入框中。一旦他们将其粘贴进去，该页面就会自动将他们发送到该特定页面。

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

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

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

Answer 3

我找到了一种方法来完成这项工作。

我将我必须的 <InputComponent> 标签更改为普通的 <input> 标签，然后添加了一个 @change，这将 link 到我创建的方法中。

下面是我做的。

<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;": 允许我只粘贴而不输入任何我想要的内容。

在输入框中输入link时自动重定向到另一个页面

Automatically redirect to another page when link is entered in input box

html

javascript

input

paste

vue.js