Hello. I would like to be able to resize my inputs based off of the value currently in them. I want to make a page that asks for values in sentence form instead of just a list of inputs. For example, I want to make it like this:
.nowrap {
display:inline;
}<div>
<p>Please fill out the following form to the best of your ability.</p>
<div>
My name is <input type="text" id="name" value="Jane Doe">, and I am <input type="number" id="age" value="18">. I found this tool using <form class="nowrap"><select id="foundUsing"><option value="a"> Google</option><option value="b"> The Facebook ad</option><option value="c"> The Newspaper Ad</option><option value="d"> Other</option></select></form>
</div>
</div>But the issue is, the text looks weird with long input boxes. How might I make the box automatically resize itself whenever the input gets too large, and shrink itself when it is too small? I have JQuery, if it helps, but I'm not too familiar with it. Thanks
You can set an initial width and in the onchange you can use something like this add or subtract
var width = document.getElementById("input-number-box").value;
document.getElementById("myInput").style.width = width + '%';
We can add a listener for every input tag and modifying width of that element based on entered value.
var inputTags = document.querySelectorAll('input'); // Get all the input element
for(input of inputTags){
input.addEventListener('input', resizeInput);
resizeInput.call(input); //To call function immediately
function resizeInput() {
if(this.type=='number'){
//adding extra 3ch for number arrows
this.style.width = this.value.length + 3 + "ch";
}
//we can handle more cases like files
else{
this.style.width = this.value.length + "ch";
}
}
}.nowrap {
display:inline;
}
select{
width:100px;
}<div>
<p>Please fill out the following form to the best of your ability.</p>
<div>
My name is <input type="text" id="name" value="Jane Doe">, and I am <input type="number" id="age" value="18">. I found this tool using <form class="nowrap"><select id="foundUsing"><option value="a"> Google</option><option value="b"> The Facebook ad</option><option value="c"> The Newspaper Ad</option><option value="d"> Other</option></select></form>
</div>
</div>I created a hidden div where I add span and take the measure calculated by the browser, then I use that value for the input boxes with a padding that depends on the type of input
function resizeElem (elemId, paddingRight) {
if (!paddingRight) {
paddingRight = 0;
}
let calcDiv = document.getElementById("sizeCalcDiv");
let elem = document.getElementById(elemId);
let elemValue = elem.value;
if (elem.nodeName==="SELECT") {
elemValue = elem.options[elem.selectedIndex].innerHTML;
}
if (!elemValue) {
elemValue="";
}
let spanCalc = document.getElementById(elemId+"_sizeCalc");
if (!spanCalc) {
spanCalc = document.createElement("SPAN");
spanCalc.id=elemId+"_sizeCalc";
calcDiv.appendChild(spanCalc);
}
spanCalc.innerHTML=elemValue;
elem.style.width=spanCalc.offsetWidth+paddingRight+"px";
}
resizeElem("name",5);
resizeElem("age",25);
resizeElem("foundUsing",20);.nowrap {
display:inline;
}
.hidden {
height:0;
overflow: hidden;
}<div>
<p>Please fill out the following form to the best of your ability.</p>
<div>
My name is <input type="text" id="name" value="Jane Doe" onkeydown="resizeElem('name',5);">, and I am <input type="number" id="age" value="183" onkeyup="resizeElem('age',25);">. I found this tool using <form class="nowrap"><select id="foundUsing" onclick="resizeElem('foundUsing',20);"><option value="a"> Google</option><option value="b"> The Facebook ad</option><option value="c"> The Newspaper Ad</option><option value="d"> Other</option></select></form>
</div>
<div id="sizeCalcDiv" class="hidden">
</div>
</div>