Uneditable characters in textarea using jquery-CodePudding

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

_______________ . _____________________ . ________________________ .

CodePudding user response：

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 >
  <input  maxlength="5" /></input>.<input  maxlength="5" /></input>.<input  maxlength="5" /></input>
</div>

CodePudding user response：

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