调整文本框的字体大小

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

所以只有当你改变lenght 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)">

012：作为文本长度的函数来计算你需要两

Answer 2

的几件事情要做

1. 当你设置为输入元素字体大小应包装成字符串像素或百分比等...

   这是例子：

   var x = document.getElementById（“allocatedVisionBudget”）。style.fontSize =“60px”;

2. 当您使用X-20的x是字符串，所以你需要使用parseInt（x）函数

这里是你的代码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; 
}