how to dynamically resize number input in html

Question

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

I think that this question is already answered in [here](https://stackoverflow.com/questions/3392493/adjust-width-of-input-field-to-its-input) — Bayan Abuawad, Jun 01 '22 at 12:33

score 0 · Answer 1 · answered Jun 01 '22 at 12:47

0

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 + '%';

answered Jun 01 '22 at 12:47

Shubham Sogi

81
7

score 0 · Answer 2 · answered Jun 01 '22 at 12:48

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>

score 0 · Answer 3 · answered Jun 01 '22 at 15:12

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>

how to dynamically resize number input in html

3 Answers3