Prevent text wrapping in input field
This takes up little space on the list of major issues, but I'm trying to make a zip-code input field that has a border image below it with five em dashes, like this:
document.getElementById("zip_entry").focus();
#zip_entry_container {
text-align: center;
background-color: black;
color: white;
padding-bottom: 30px;
padding-top: 20px;
}
input {
font-family: monospace;
display: block;
margin: 0 auto;
color: white;
background-color: black;
outline: none;
padding: 0;
width: 238px;
border: none;
font-size: 80px;
height: 60px;
text-align: left;
}
img {
width: 238px;
}
<div id="zip_entry_container">
<input id="zip_entry" type="text" maxlength=5 pattern="\d*" />
<img src="https://i.stack.imgur.com/8kNE4.png" />
</div>
Dead just isn't it? Here's a demo of CodePen
I have neatly aligned the input and the image below it in CSS, so that using a monospaced font, the numbers are aligned exactly with the dash below them until the fifth digit is entered, at which point, although I set it maxlength
to 5, the numbers are shifted a few pixels to the left ... Here's the video what I mean, or you yourself see it in the CodePen link.
I can live with this problem, but I find it really annoying. Any ideas on how I can prevent this default behavior? I've tried messing around with keydown
and preventing the event bubble, but that doesn't stop the browser from moving the text that returns to the correct place when you lose focus.
I would also love if the cursor was centered on the dash, but the only way I can do this is to do five inputs in a row, and that caused all sorts of headaches with a bunch of event listeners to switch focus to the next sibling on keyup
. switch to previous sibling in reciprocal space and otherwise overwrite all input box functions.
UPDATE: I thought I could work it out by typing right away .blur()
when the fifth digit is entered, but the shift still happens for a second of a second. G!
source to share
The main issue (especially in terms of browser compatibility) is that it font-family: monospace
causes different fonts to be used depending on OS and browser (see MDN ). In the Codepen app, Chrome on Windows will use Consolas, while Firefox seems to use Courier New. If different fonts are used, the letters will have different widths and therefore will have inconsistent letters.
If the text input is too large for its content, the text will move to the left (as mentioned and explained by Vadim Ovchinnikov). to avoid this, there must be enough space for the cursor. Using 5ch as a block width looks like a good solution to me.
Putting this together:
source to share
The problem appears to be a cursor. If you add extra pixels wide (240px instead of 238px) to the input, it won't shift:
input {
font-family: monospace;
display: block;
margin: 0 auto;
color: white;
background-color: black;
outline: none;
padding: 0;
width: 240px;
border: none;
font-size: 80px;
height: 60px;
text-align: left;
}
source to share
You can get rid of the image and JavaScript and use gradients here. Demo video:
#zip_entry_container {
background-color: black;
color: white;
padding-bottom: 30px;
padding-top: 20px;
display: flex;
justify-content: center;
}
input {
box-sizing: content-box;
font-family: Consolas, monospace;
color: white;
outline: none;
padding: 0;
border: none;
/* 5 * (1ch + letter-spacing) */
width: 6ch;
font-size: 80px;
height: 65px;
text-align: left;
background: #000 repeating-linear-gradient(90deg,
white 0,
white 1ch,
transparent 0,
transparent 1.2ch)
0 100%/100% 2px no-repeat;
/* show background only for content */
background-clip: content-box;
/* just add 1px to avoid cursor overflow */
padding-right: 1px;
letter-spacing: .2ch;
}
<div id="zip_entry_container">
<input id="zip_entry" type="text" maxlength="5" pattern="\d*" autofocus />
</div>
source to share