使用jquery的文本区域中的不可编辑字符

Question

我必须在文本区域显示一些空白填充。每次填充后都有一个fullstop，用户可以在填充中键入任何内容。但是句号应该是固定的，他们不能删除句号。任何解决方案。感谢

_______________._____________________.________________________。

Answer 1

使用文本区域无法实现
但是使用一些输入是可能的。你只需要处理你的CSS，让它看起来像你想要的。。。就像放在一个更大的盒子里。

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>

Answer 2

查看

<div><textarea></textarea></div>
<style>
textarea{
outline:none;
border:none;
border-bottom:1px solid #888;
}
div::after{
content:".";
}
</style>

您也可以使用输入而不是文本区域