JS input value数据调整

JS判断input value的高度和长度 并按要求修改后缀单位显示

显示需要的效果截图

默认情况

1.png

输入后

2.png

点击input修改数据

3.png

HTML代码

<div style="position: relative;">
      <input type="text" name="coinsNum" id="coinsNum" onblur="earnCoinsCal()" onfocus="focusCoinsNum()" class="selltous-input" value="" placeholder="SELLFORMAMOUNTCOINS(K)">
       <span style="position: absolute;right:10px;top:15px;font-size: 15px;font-weight: bold;margin-right:6px;" id="earnCoinsk" class="earnCoinsk">K</span>
 </div>

JS代码

    //默认选中复原状态
    function focusCoinsNum(){
        var earnCoinsk=document.getElementById("earnCoinsk");
        earnCoinsk.style.cssText = earnCoinsk.style.cssText.replace(/margin-right:/,"margin-right:6px;");
    }
    //计算字符实际宽度
    function computeFontSize(str, size, family) {
        let spanDom = document.createElement("span");
        spanDom.style.fontSize = size;
        spanDom.style.opacity = "0";
        // spanDom.style.fontFamily = family;
        spanDom.innerHTML = str;
        document.body.append(spanDom);
        let sizeD = {};
        sizeD.width = spanDom.offsetWidth+25;
        sizeD.height = spanDom.offsetHeight;
        spanDom.remove();
        return sizeD;
    }
    //计算金币收益
    function earnCoinsCal(){
        var coinsNum = $("input[name='coinsNum']").val();
        var coinsNumLength = $("#coinsNum").val().length;
        var earnCoinsk=document.getElementById("earnCoinsk");
        if(coinsNumLength > 1){
           var sizeD = computeFontSize(coinsNum, "15px", "微软雅黑");
           earnCoinsk.style.cssText = earnCoinsk.style.cssText.replace(/margin-right:/,"margin-right:calc(100% - "+sizeD['width']+"px);");
        }
     }

其实还有很多替换简单的方式 例如通过div（可编辑DIV）模拟input样式效果 嵌套来达到同样的效果 只是为了整理一下该方式