изменить размер шрифта текстового поля

Question

Я использую приведенный ниже код, чтобы уменьшить размер шрифта, но он уменьшится только один раз, я хочу, чтобы он уменьшался каждый раз, когда я вводил новый символ.

<input type="text" value="" id="allocatedVisionBudget" onkeydown="resizetext()"> 


<style> 
#allocatedVisionBudget { 
    width: 10%; 
    height: 93.3px; 
    background-color: rgba(255,255,255,0); 
    border: none; 
    font-size: 60px; 
    color: #7e8081; 
    padding: 0px; 
} 
</style> 

<script> 
function resizetext(){ 

     var xy = document.getElementById('allocatedVisionBudget').value; 
     var x = document.getElementById("allocatedVisionBudget").style.fontSize=60; 
     //x; 
     xy; 
     var i=0; 
     var y=xy.length; 
     if(xy.length > 4) { 
      document.getElementById("allocatedVisionBudget").style.fontSize=x-20; 
    } 
} 
</script> 

Answer 1

У вас есть только одно условие:

if(xy.length > 4) { 

так изменяет только тогда, когда вы изменяете длину от 4 до 5 или от 5 до 4. Либо добавить больше условий, или лучше сделать FONTSIZE рассчитывается как функция длины текста:

document.getElementById("allocatedVisionBudget").style.fontSize=f(xy); 

function resizetext(e){ 
 
    var xy = document.getElementById('allocatedVisionBudget').value; 
 
    var l=xy.length; 
 
    var f = Math.ceil(80/xy.length) || 60; 
 
    console.log(e, xy, l, f); 
 
    document.getElementById("allocatedVisionBudget").style.fontSize=f + "px"; 
 
}

#allocatedVisionBudget { 
 
    width: 10%; 
 
    height: 93.3px; 
 
    background-color: rgba(255,255,255,0); 
 
    border: #f00 solid 1px; 
 
    font-size: 60px; 
 
    color: #7e8081; 
 
    padding: 0px; 
 
}

Input: <input type="text" value="" id="allocatedVisionBudget" onkeypress="resizetext(event)" onkeydown="resizetext(event)" onkeyup="resizetext(event)">

Answer 2

несколько вещей, которые вы должны сделать

1. при установке для ввода размера элемента шрифта он должен обернуть в виде строки с рх или% и т.д. ...

   это пример:

   var x = document.getElementById ("selectedVisionBudget"). Style.fontSize = "60px";

2. при использовании X-20 х струнный поэтому вам нужно использовать функцию ParseInt (х)

вот demo для кода

HTML:

<input type="text" value="" id="allocatedVisionBudget" onkeydown="resizetext()"> 

javascript:

window.resizetext = function() { 

    var xy = document.getElementById('allocatedVisionBudget').value; 
    var x = document.getElementById("allocatedVisionBudget").style.fontSize = "60px"; 

    var i = 0; 
    var y = xy.length; 
    if (xy.length > 4) { 
    document.getElementById("allocatedVisionBudget").style.fontSize =  (parseInt(x) - 20) + "px"; 
    } 
}; 

CSS:

#allocatedVisionBudget { 
width: 100%; 
height: 93.3px; 
background-color: rgba(255, 255, 255, 0); 
font-size: 60px; 
color: #7e8081; 
padding: 0px; 
}