在输入框中输入链接时自动重定向到另一个页面答案

【问题标题】：Automatically redirect to another page when link is entered in input box在输入框中输入链接时自动重定向到另一个页面
【发布时间】：2019-03-18 10:43:17
【问题描述】：

我正在创建一个简单的网页，允许用户将网页 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>

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

非常感谢。

【问题讨论】：

到目前为止你有什么尝试？
请至少创建 HTML/CSS。人们会帮助你并指导你编写逻辑。 :)
@KalpeshSingh 我刚刚将我的 HTML 添加到问题中
您应该告诉您的用户将 URL 粘贴到他们浏览器的地址栏中。
@ceving : 就像你的评论一样在我的脑海里

标签： javascript html vue.js input paste

【解决方案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来完成，但是如果在鼠标的帮助下输入可能会出现一些问题。

【讨论】：

【解决方案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 之后。不是在输入中写入文本时，而是在粘贴之后。希望对您有所帮助。

【讨论】：

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

【讨论】：