An input element can have a size attribute that determines how many characters its width can hold, which is a neat feature in scenarios where the number of characters is fixed for certain types of input. For example the phone number, credit card number, customer ID number etc. In such cases it's more convenient to just put the size attribute on the input field than having to dig into the style sheet and define a width for each of them.
However, when putting the size attribute it does not take into account letter-spacing. If I want my numbers to be more spread apart, they overflow the input width. Is there any way I can specify the size of an input field taking into account letter spacing and potentially other things affecting text size?
HTML:
<input size="5" placeholder="#####"/>
CSS:
input { letter-spacing: 1em }
See this JSFiddle for the output. Notice that the placeholder text overflows the input field.
Note that this failure to account for letter-spacing when determining size happens in Chrome but not FF.
Try settingletter-spacing to set kerning between characters. This is honored when you change the size attribute.
input {
letter-spacing: 0.25em;
}
http://jsfiddle.net/RhwBG/
You can widen it dynamically using onkeypress.This might be helpful
Adjust width of input field to its input
Related
I need to create a Text Area to copy and enter 7 digit serial numbers from Excel.
The problem is that while Excel recommends copying and entering numbers, there will be users who enter serial numbers by hand.
Therefore, even if the user enters the serial number by hand, I would like to set the text area to wrap every seven characters so that User can verify that the serial number entered is 7 digits.
Of course i can implement this with javascript, but can i limit the length of the line with just a simple setup of CSS?
I tried it with the code bellow, but it didn't work...
<textarea
rows="7"
cols="7"
wrap="hard">
Some serial number on here.
</textarea>
If anyone have a way, I'd appreciate it if you could let me know.
The rows and cols attributes specify the visible width. What you require is something that will force the text to wrap after 7 characters. The only way to do this in CSS for a textarea is to set a fixed width equal to the length of 7 characters.
textarea{
resize: none;
width: 7em;
}
Instead of using px you can set a fixed width of 7em.
Here 1em is equal to the current font size so 7em will be 7 characters wide. The row attribute in the textarea will then force the text to wrap if an additional character is entered.
If 7em does not work, it is possible that there is additional padding and line-height too needs to be taken in to account as well. You'll have to adjust the width accordingly.
You should also set the resize: none; style to prevent users from resizing the textarea.
I have an html number input with text align set to center. I want to center text above and below so that it lines up with the text in the input field; however, some browsers add up and down arrows that shift the center of the text in the input field. Is there a way for me to calculate by how much the center is shifted at runtime?
An <input type="number"> element is expected to be rendered differently in different browsers and with different settings. It is expected to provide some user interface for entering a number, and only a number, with the constraints specified by other attributes of the elements. Thus, you cannot know what it looks like or control that, unless a browser provides an API for that.
So if you wish to align the number entered by the user up with some other elements, use <input type="text"> instead and perform checks on the data format with the pattern attribute and/or JavaScript (in addition to server-side checks, of course).
I do not want the scroll bars,hence i've given overflow:hidden.
A simple text area:
<textarea cols=10 rows=2 style='overflow:hidden' ></textarea>
when opened in Opera Browser -- fails to wrap the entered text onto the next line when the entered text exceeds the column length (Text gets wrapped onto the next line in every other browser -- FF,Chrome,Safari)
from the HTML4 spec:
cols = number [CN]
This attribute specifies the visible width in average character widths. Users should be able to enter longer lines than this, so user agents should provide some means to scroll through the contents of the control when the contents extend beyond the visible area. User agents may wrap visible text lines to keep long lines visible without the need for scrolling.
there is no required there that it must wrap.
and from the HTML5 spec:
The cols attribute specifies the expected maximum number of characters per line. If the cols attribute is specified, its value must be a valid non-negative integer greater than zero. If applying the rules for parsing non-negative integers to the attribute's value results in a number greater than zero, then the element's character width is that value; otherwise, it is 20.
The user agent may use the textarea element's character width as a hint to the user as to how many characters the server prefers per line (e.g. for visual user agents by making the width of the control be that many characters). In visual renderings, the user agent should wrap the user's input in the rendering so that each line is no wider than this number of characters.
So maybe there you could be right, although I don't know how strict a "should" is in this definition.
But in both cases it's probably by design.
Taken directly from W3Schools:
Definition and Usage The size attribute specifies the width of an
input field.
For <input type="text"> and <input type="password">, the size
attribute defines the number of characters that should be visible. For
all other input types, size defines the width of the input field in
pixels.
So..
If that is true why is my field <input type="text" size="2"/> wide enough to display 5 CAPTIAL MMMMM's ?
The same "erroneous" information is specified in the HTML4 Spec, the HTML5 spec, Sitepoint, Mozilla Developer Network, and Microsoft's MSDN library. So it isn't just W3Schools' fault.
Anyway, while the specs say that the size attribute should be the number of characters visible, most web browsers have settled on using the number of em units, meaning the width of the character of the capital M.
To specify the width precisely in pixels, or any unit of your choice, use the CSS width property.
To answer your updated question: it's the width of the capital M in the default font size as applied by CSS styling to the text box, but the font size of the text inside the text box is usually smaller.
Want to make a set number of characters fit inside the box? You'll have to switch to a fixed width font.
The problem is that the size = x attribute isn't in pixels... rather, it denotes the very approximate size that the <input /> element must be to hold x characters. So, for example, <input size=2 /> should display a input box that can hold 2 characters.
Unfortunately, this varies from font to font (esp. variable width fonts), and so you will likely observe that setting the size attribute to 2 will in fact render an input box with the size of 5 or something like that. If you use a monospace font, though, size=2 should render a text field that can hold exactly 2 characters... or at least get close.
However, to set the width of an <input> element in pixels, ems, etc., try using the width CSS property instead:
<input type="text" style="width:20px" />
The above example will make the input width exactly 20 pixels wide, excluding borders and/or padding.
You can't take that literally, as that is not possible.
The width of the element is based on the size attribute and the font size used, but it won't fit that number of characters exactly, because that is not possible.
All characters doesn't have the same width, so the characters llll will easily fit in an input with size="4", but the characters mmmm won't.
Also, there is some extra space added, so an input with size="2" will not be twice as wide as an input with size="1".
What's used as an average character width might depend on the browser. I tested in Firefox, and I haven't found any character that matches exactly, but the character * matches that average width pretty well.
The answer is that, unless using a fixed width font, the browser can't accurately determine the width of two characters. I think your two character field would probably fit two "m"s side-by-side.
As far as the correctness of w3schools, the following is from the W3C:
size = cdata [CN]
This attribute tells the user agent the initial width of the control. The width is given in pixels except when type attribute has
the value "text" or "password". In that case, its value refers to the
(integer) number of characters.
http://www.w3.org/TR/html4/interact/forms.html#edef-INPUT
The other/outer css class may affect the size or inline CSS.
My case is:
when using an outer div with a class "input-group", the size or inline style will not work at all. Removing this class of "input-group" if possible will make it work.
<div class="input-group">
<input type="text" class="form-control" required style="width:20px">
</div>
I've got a JS-generated fill-in-the-gap text/cloze and I'm having trouble adjusting the text boxes to the right size.
But unlike others I'm in the position of knowing exactly what the user will/should enter.
So, if I have a gap _______________ like this, I want the input to be exactly 4 characters wide. However, maybe since I'm using a proportional font (and that won't change), the width is always too large (even for a succession of capital Ds which are pretty wide).
So, what do you suggest? I tried setting the width with size, CSS width in em (too big) and ex (too narrow even for xxes).
I could calculate the width of the actual word (the one that needs to be filled in) a hidden span element, but that seems inelegant.
Is there a way to make the browser have a more accurate guess at the width of the input when I'm using a proportional font?
Monospaced Font
The best results I've seen came through using a monospace font:
<input type="text" size="4" style="font-family:monospace" />
Online Example: http://jsbin.com/epagi/edit Rendered neatly in Firefox, Chrome, Safari, and IE.
If you're using a variable-width font, you would have to use scripting to get a better guess as to what the expected width would be, but as you said, this isn't very elegant.
Variable-Width Font
I tried to work up a reasonable-simple solution for variable-width fonts, but ultimately you will need to see if it fits your project or not.
Basically what I did was set the text-transform of particular inputs to uppercase to get a semi-consistent expectation for how wide something will be when filled out with text. I then applied a classname that indicated the field should be auto-sized, and how many chars we're expecting: sizeMe-4. Using jQuery, I collected all of these inputs, and split this classname to get the number of chars expected.
I extended the String object to include a repeat method which allows me to easily create a string of the expected size, and add it to an ad-hoc span element to get the width. This width was then retroactively applied to the initial input element. The span is then discarded.
Online Demo: http://jsbin.com/epagi/2/edit
For convenience, here's the code:
<input type="text" name="pin" maxlength="4" class="sizeMe-4"
style="text-transform:uppercase" />
--
String.prototype.repeat = function(num) {
return new Array( num + 1 ).join( this );
}
$(function(){
$(":input[class^='sizeMe']").each(function(){
var size = Number($(this).attr("class").split("-").pop());
var newW = $("<span>").text( "X".repeat(size) ).appendTo("body");
$(this).width( $(newW).width() );
$(newW).remove();
});
});
Mootools
In case anybody stumbles upon this, in Mootools I just created a span containing the to-be-filled-in gap text and used these methods from Mootools More (they guarantee invisibility which is pretty important for a cloze.
$('gapsize').measure(function(){return this.getComputedSize()});