[Vuejs]-Automatically redirect to another page when link is entered in input box

by

1👍

✅

I found a way to make this work.

I changed the <InputComponent> tag I had to a normal <input> tag and then added an @change which would link to a method I created.

Below is what I did.

<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;": allows me to only paste and not type anything which is what I wanted as well.

👤Aadil Hafesji

1👍

I think your questions a litil bit awkward well you can set internal and check regularly value of input box when input box get some value redirect to another page 

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

here i assume that your element index is 0;
it can be done the keybord eventListner also but there might be some problem if input gose with the help of mouse.

👤Vishal choudhary

1👍

I don’t know what is your InputComponent, but if use <input> you can try this code:

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

That code is just for your requirements – after paste url. Not when write text in input, but just after paste.
Hope this help you.

👤Alex

Leave a comment