I have to show some blank fillups in textarea. After every fillups there is fullstop, User can type anything in fill ups. But the full stop should be fixed they cannot delete the full stop. Any solution . Thanks
_______________ . _____________________ . ________________________ .
Impossible to achieve using a textarea.
But using some inputs, it is possible. You just need to work on your CSS to make it look as you wish... Like in a larger box.
let fillup = $(".fillup")
fillup.on("keydown", function(e) {
let val = this.value
if (val.length == $(this).attr("maxlength")) {
$(this).next(".fillup").focus()
}
if (e.key === "Backspace" && val.length === 0) {
$(this).prev(".fillup").focus()
}
})
fillup.first().focus()input {
width: 2.7em;
border: 0;
border-bottom: 1px solid cyan;
}
input:focus {
outline: none;
}
.box {
border: 1px solid grey;
padding: 0.5em 3em;
border-radius: 3px;
width: 8em;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<input class="fillup" maxlength="5" /></input>.<input class="fillup" maxlength="5" /></input>.<input class="fillup" maxlength="5" /></input>
</div>Check it out
<div><textarea></textarea></div>
<style>
textarea{
outline:none;
border:none;
border-bottom:1px solid #888;
}
div::after{
content:".";
}
</style>
You can use input too instead of textarea