How to set an input width to match the placeholder text width
This can be done only via javascript by setting the size = placeholder length:
input.setAttribute('size',input.getAttribute('placeholder').length);
Here is a code that dose that for all the inputs:
http://jsfiddle.net/KU5kN/
Adjust width of input field to its input
It sounds like your expectation is that the style be applied dynamically to the width of the textbox based on the contents of the textbox. If so you will need some js to run on textbox contents changing, something like this:
<input id="txt" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';">
Note: this solution only works when every character is exactly 8px
wide. You could use the CSS-Unit "ch" (characters) which represents the width of the character "0" in the chosen font. You can read about it here.
How can I get placeholder text to shrink to fit within its text input element and show its entire value?
Original Reply - July 2015
What about doing something like this? I used jQuery to demonstrate it. If you want it to be more 'exact' in terms of width of the text, you can look at a way to get the text's width and then setting the width in jquery's CSS to the value returned from the function that gets the text's width (in which case you will likely have to create an element, set its html to the placeholder's content, get the text's width and then delete the element). In any case, the code below is what I would do to accomplish what you are asking.
I decided to use setInterval
because getting changes to input fields are not black and white. each
loops through the input elements. The code then checks to see if input is empty, if it is, is downscales the font-size (to 10px as I hardcoded it), otherwise it sets it to the default (let's say you want 14px, it gets 14px).
setInterval(function() { $('input').each(function(){ if($(this).val() === ''){ $(this).css({ "width":$(this).width()+"px", "height":$(this).height()+"px" }); if(parseFloat($(this).css('font-size'))<=14){ $(this).animate({ "font-size":10+"px" }); } } else { $(this).finish().clearQueue().css({ "font-size":14+"px" }); } });}, 100);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><form> <table border="1"> <tr> <td>Traveler's name:</td> <td> <input type="text" id="travelername" placeholder="Last Name, First Name, Middle Initial"/> </td> </tr> <tr> <td>Traveler's E-mail:</td> <td> <input type="email" id="traveleremail"/> </td> </tr> </table></form>
How to set html input tag width fit-content in css
You can do like this.
I posted two solution with span and data-*.
html
<p>solution with span <span class="number-input" role="textbox" contenteditable>200001230001003002</span></p>
<p>Solution with data-*<label class="input-sizer" data-value="200001230001003002">
<input class="number-input1" type="text" oninput="this.parentNode.dataset.value = this.value" size="1" value="200001230001003002">
</label></p>
<button class="save"></button>
-css
.number-input {
border: 1px solid #ccc;
font-family: inherit;
font-size: inherit;
padding: 1px 6px;
}
.number-input1{
font-family: inherit;
font-size: inherit;
}
.input-sizer {
display: inline-grid;
vertical-align: top;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
font-family: inherit;
font-size: inherit;
}
.input-sizer::after
{
content: attr(data-value) " ";
visibility: hidden;
font-family: inherit;
font-size: inherit;
white-space: pre-wrap;
}
Input width fit to content
I would consider another trick. You can use an editable div on where you apply some properties to allow it to fit its content (basically make it an inline element), then with JS you get the text and you put it on the input.
Here is a simple example. You only have to deal with the initial width and set it like you want. You can also easily add a placeholder and remove it using JS.
document.querySelector(".input").addEventListener("input", function(e) { document.querySelector("input").value=e.target.innerHTML;}, false);
.input { border:1px solid #000; display:inline-flex; min-width:20px;}
<div class="input" contenteditable="true"></div><input type="hidden">
Dynamically Adjust HTML Text Input Width to Content
Use onkeypress even
see this example :http://jsfiddle.net/kevalbhatt18/yug04jau/7/
<input id="txt" placeholder="name" class="form" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"></span>
And for placeholder on load use jquery and apply placeholder
size in to input
$('input').css('width',((input.getAttribute('placeholder').length + 1) * 8) + 'px');
Even you can use id instead of input this is just an example so that I
used $(input)
And in css provide min-width
.form {
border: 1px solid black;
text-align: center;
outline: none;
min-width:4px;
}
EDIT:
If you remove all text from input box then it will take placeholder value using focusout
Example: http://jsfiddle.net/kevalbhatt18/yug04jau/8/
$("input").focusout(function(){
if(this.value.length>0){
this.style.width = ((this.value.length + 1) * 8) + 'px';
}else{
this.style.width = ((this.getAttribute('placeholder').length + 1) * 8) + 'px';
}
});
Related Topics
Prevent Nginx from Serving CSS Files as Text/Plain
Why Does Fixed Positioning Alter the Width of an Element
CSS Stretched Background Image
Change Colour Navbar Header Ionic 2
Webgrease Error on Styles.Render Call in _Layout.Cshtml in MVC4
ASP.NET MVC 4 Minification & Background Images
100% Width Div Gets Cut Off When I Scroll Right If My Browser Window Is Smaller Than Div's Content
CSS Select First Child Only If Two Children
How to Use '&' and a Tag on the Same Selector
CSS Attribute Selector + Descendant Gives a Bug in Webkit
Give a CSS Styled Div a "Border-Left-Image"
Flex Direction: Row-Reverse in React-Native
CSS Modules - Exclude Class from Being Transformed
Lato Font Missing Letters in Ie and Firefox
Convert Internal Stylesheet to Inline CSS
Styling HTML and Body Selector to Height: 100%; Vs Using 100Vh