In my HTML, I have an array of inputs. The user should be allowed to enter only one character in each. Here is its HTML:
<input class = "green" type="text" maxlength="1" />
The CSS for this is as follows:
input {
font: 1.5em "Times New Roman", Times, serif;
width:0.9em; height: 0.9em;
text-align:center; }
.green {
color: green; }
If the user enters a character and then tries to enter another, nothing should happen. However, in my design the user can enter any number of characters, even though the earlier characters are pushed to the left and only the last character is visible. When the focus leaves the input field, all extra characters disappear and only the first input character remain. How can I make sure that when the user tries to enter additional characters, they are ignored and nothing happens?
Is it what you need?
function go(v){
if (v.value.length==0){
return true;
}
return false;
}<input class = "green" type="text" maxlength="1" onkeydown="return go(this)"/>