Hola. Me gustaría poder cambiar el tamaño de mis entradas en función del valor que tienen actualmente. Quiero hacer una página que solicite valores en forma de oración en lugar de solo una lista de entradas. Por ejemplo, quiero hacerlo así:
.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>Pero el problema es que el texto se ve extraño con cuadros de entrada largos. ¿Cómo puedo hacer que el cuadro cambie de tamaño automáticamente cada vez que la entrada sea demasiado grande y se encoja cuando sea demasiado pequeño? Tengo JQuery, si ayuda, pero no estoy muy familiarizado con él. Gracias
Puede establecer un ancho inicial y en el cambio puede usar algo como esto, sumar o restar
var width = document.getElementById("input-number-box").value; document.getElementById("myInput").style.width = width + '%';Podemos agregar un oyente para cada etiqueta de entrada y modificar el ancho de ese elemento en función del valor ingresado.
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>Creé un div oculto donde agrego el intervalo y tomo la medida calculada por el navegador, luego uso ese valor para los cuadros de entrada con un relleno que depende del tipo de entrada
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>