when creating a simple web page that will allow the user to paste a web url link into an input box. Once they have pasted it in then the page will automatically send them to that specific page.

I don’t need a button, just a way for them to paste and then the page loads the url they have pasted.

<template>
<div class=”importEvent”>
<img class=”imageSize” src=”~/assets/Missing Icons/facebook.svg” alt=”Facebook”>
<InputComponent placeholder=”Paste the 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>

If someone can please help, it would be much appreciated.

Many thanks.

Solution :

I think the 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 the 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.

Solution 2:

I don’t know what is the 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 the 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 the requirements - after paste url. Not when write text in input, but just after paste.
Hope this help you.

Solution 3:

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