Dealing with two input fields that require removing spaces between strings has proven to be a challenge. I initially attempted to use event.clipboardData.setData, but unfortunately, it did not yield the desired outcome. Afterward, I resorted to using this.Name_of_my_state. However, this approach resulted in both the pasted item and the space-removed item being displayed. Let's delve into my code for further clarity.
<template>
<span>
<input class="form-control inputHeight"
@keydown.space.prevent
@paste.space="remove_on_paste"
v-model="floatingData.from_id">
<input class="form-control inputHeight"
@keydown.space.prevent
@paste.space="remove_on_paste"
v-model="floatingData.to_id">
</span>
</template>Initially, this method was unsuccessful:
new Vue({
data() {
return {
floatingData: {
from_id: "",
to_id: ""
}
}
},
methods: {
// Remove space on paste
remove_on_paste(event) {
let main_text = event.clipboardData.getData("text");
event.clipboardData.setData("text", main_text.replace(/\D/g, ""));
}
}
})Result:
https://i.sstatic.net/aYnxn.png
Subsequently, I attempted a different approach which resulted in both the copied and replaced values being pasted:
new Vue({
data() {
return {
floatingData: {
from_id: "",
to_id: ""
}
}
},
methods: {
// Remove space on paste
remove_on_paste(event) {
let main_text = event.clipboardData.getData("text");
this.floatingData.from_id = main_text.replace(/\D/g, "");
}
}
})Result: