how to dynamically resize number input in html-CodePudding

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 ><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

CodePudding user response：

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

CodePudding user response：

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 ><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>

CodePudding user response：

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 ><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" >  
  </div>
</div>