It seems like you're looking to dynamically invert user input in real time using @keyup, while still displaying the original sentence in the input field. After some research, I discovered a workaround as v-model doesn't allow for changing input while typing. The solution involves using absolute positioning and two input fields – one hidden on top for input and one visible at the bottom for output.
To see the live preview, check out: Sandbox preview
<template>
<div class="hello">
<div class="invert">
<input type="text" v-text="input" class="input" @keyup="handle" >
<input type="text" v-model="output" class="output" >
</div>
</div>
</template>
<script>
export default {
data() {
return {
input : '',
}
},
computed : {
output (){
return this.input.split("").reverse().join("");
}
},
methods : {
handle(event) {
this.input = event.target.value;
}
}
}
</script>
<style scoped>
.invert {
position : relative ;
width: 200px;
height: 20px;
margin: 0 auto;
}
.output , .input{
position: absolute;
width: 100%;
right: 0;
}
.input {
z-index: 5;
opacity : 0 ;
}
.output {
z-index: 0;
opacity : 1 ;
}
</style>
Best Solution
One Input!
If you notice any flickering when the input initially appears non-inverted, it may be due to v-model binding occurring before the handle function. Check out the updated version here:
Sandbox preview
<template>
<div class="hello">
<div class="invert">
<input type="text" v-model="input" class="input" @input="handle" />
</div>
</div>
</template>
<script>
export default {
data() {
return {
input: "",
};
},
methods: {
handle(event) {
if (this.input.length > 1) {
this.input =
this.input[this.input.length - 1] +
this.input.substring(0, this.input.length - 1);
}
},
},
};
</script>
Second Option Two Inputs
If you encounter the non-inverted input issue, you can go back to using two inputs due to the limitation of v-model binding speed. However, this time, utilize transparency instead of opacity for selection ability. Update the style with:
sandbox preview
.input {
z-index: 5;
background: transparent;
}