输入框文本大小自适应效果

简介

常常有产品提起这种效果

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);
        }
    }
}