Автоматическое перенаправление на другую страницу при вводе ссылки в поле ввода

Question

Я создаю простую веб-страницу, которая позволит пользователю вставить веб-ссылку в поле ввода.Как только они вставят его, страница автоматически отправит их на эту конкретную страницу.

Мне не нужна кнопка, просто способ их вставить, а затем страница загружает вставленный 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

Я не знаю, какой у вас 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 2

Я думаю, что ваши вопросы немного неудобны, вы можете установить внутреннюю и регулярно проверять значение поля ввода, когда поле ввода получает какое-то значение, перенаправленное на другую страницу

 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, но могут возникнуть проблемы, если ввод осуществляется с помощью мыши.

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;": позволяет мне только вставлять, а не печатать что-либо, что я тоже хотел.