輸入框文本大小自適應效果

簡介

常常有產品提起這種效果

html

寫上一個input元素

<h1>在輸入框中輸入文字</h1>
<input type="text" id="autoFontSize">

css

重點在於transition動畫，讓字體大小切換的時候顯得平滑

input {
    padding: 5px;
    margin-bottom: 10px;
    border: 1px solid #333;
    font-size: 20px;
    width: 190px;
    height: 24px;
    text-align: center;
    transition: font-size 200ms linear;
}

js

監聽input輸入框的輸入，計算輸入框內容的長度（一個中文當作兩個字符長度），程序中寫死計算規則。

window.onload=function(){
    var afs = document.getElementById('autoFontSize');
    afs.oninput = function(){
        var len = 0,
            word = 0;
        for (var i = 0; i < this.value.length; i++) {
            if(this.value[i].match(/[^\x00-\xff]/ig) != null) {
                len += 2;
            }else {
                len += 1;
            }
            word++;
        }
        var config = [16, 20, 24, 28];
        var minFontSize = 12; //最小字體大小
        var mapping = 0;
        config.some((v, k) => {
            if (v >= len) {
                mapping = v;
                var fontSize = parseInt(168 * 2/v);
                this.style.fontSize = minFontSize > fontSize ? minFontSize : fontSize + 'px';
                return true;
            }
        });
        //超出字數限制
        if (mapping === 0) {
            this.style.fontSize = minFontSize + 'px';
            this.value = this.value.substr(0, word - 1);
        }
    }
}