自定义输入框

背景
客户的要求总是奇奇怪怪的，这个需求，触摸屏设备点击文本框输入时不弹出软键盘，用外接的键盘输入，一般来说，设备都有设置可以不弹出软键盘的，可是这个设备他找不到这个设置，因此就需要，自己写一个输入框，哎，绝了。
话不多说，上代码：

HTML

<div class="customizeInput">div>

CSS

.customizeInput{
    width: 260px;
    height: 36px;
    border: 1px solid #ddd;
    border-radius: 2px;
    padding: 10px;
    size: 14px;
    line-height: 14px;
    outline: none;
    color: #333;
    background-color: #fff;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    word-break: normal;
    cursor: text;
}
/* 清除左右滚动条 */
.customizeInput::-webkit-scrollbar{
    display: none;
}
@keyframes cursor-blinks {
    0% {
        opacity: 1;
        display: block;
    }
    50% {
        opacity: 0;
        display: none;
    }
    100% {
        opacity: 1;
        display: block;
    }
}

.CIContent{
    display: inline-block;
}

.cursor {
    width: 0;
    overflow: visible;
    position: relative;
    height: 100%;
    display: inline-block;
    visibility: hidden;
}

.line {
    position: absolute;
    width: 1px;
    height: 100%;
    background: #8d8888;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    animation: cursor-blinks 1s infinite steps(1, start);
}

JS( 这个项目用的jquey，很久没写了，写的不好，大佬勿喷，其实有些功能还是没有实现的，但是已经能满足客户需求了)

var thisInputDom //当前选中输入框
var inputText = '' //当前选中输入框文字
$(()=>{
    // 绑定键盘事件监听
    document.addEventListener('keydown',(e)=>{
        let key = e.key
        if(key == "Enter"){//回车 （这个还没写）

        }else if(key == "Backspace"){//退格
            inputText = inputText.substring(0, inputText.length - 1);
        }else if(key.length == 1){//屏蔽功能键
            inputText += e.key
        }

        if(thisInputDom){//输入框赋值
            $(thisInputDom).text(inputText)
        }

        let thisInputDomWidth = $(thisInputDom).width() //当前输入文本宽度
        let customizeInputWidth = $(thisInputDom).parent().width() //当前输入框宽度
        let customizeInputPadding = $(thisInputDom).parent().css('padding-left').replace(/[^0-9]/ig, "")//输入框左内边距

        //偏移到光标位置
        if(customizeInputWidth - thisInputDomWidth < 0){ 
            $(thisInputDom).css('transform',`translateX(${customizeInputWidth - thisInputDomWidth - customizeInputPadding}px)`)
            $($(thisInputDom).parent().find('.cursor')).css('transform',`translateX(${customizeInputWidth - thisInputDomWidth - customizeInputPadding}px)`)
        }else{
            $(thisInputDom).css('transform',`translateX(0px)`)
            $($(thisInputDom).parent().find('.cursor')).css('transform',`translateX(0px)`)
        }
    })

    // 获取输入框
    let inputDom = $('.customizeInput')
    let innerCode = `
                     `
    for(let i=0;i<inputDom.length;i++){
        $(inputDom[i]).append(innerCode)
        inputDom[i].onclick = onclickThisInput; //绑定点击事件
    }
})

// 输入框点击事件
function onclickThisInput(e){
    let target = e.target
    // 获取输入框
    let inputDom = $('.customizeInput')
    for(let i=0;i<inputDom.length;i++){
        $($(inputDom[i]).find('.cursor')).css('visibility','hidden')//隐藏光标
    }
    if($(target).attr('class')!='CIContent'){
        $($(target).find('.cursor')).css('visibility','revert')//显示光标
        target = $(target).find('.CIContent') // 当前文本dom对象
    }else{
        $($(target).parent().find('.cursor')).css('visibility','revert')//显示光标
    }
    inputText = $(target).text() //继承文本内容
    thisInputDom = target // 当前输入文本
}