输入字段的可见部分溢出

Question

当最后一个可见字符输入input字段时，有没有办法处理事件？
在下面的屏幕截图中，它是按 o 键

的时刻

提前致谢

Answer 1

这就是头脑：

function checkInput(input) {
    var overflowing = input.offsetWidth < input.scrollWidth;
    if( overflowing ) {
        // Do something here
        console.log('text is larger than input');
    }
}

这是实际输入标记：

<input style="width: 50px;" value="" onkeypress="checkInput(this);" />

Answer 2

据我所知，可以做到但不仅仅是一件事。

你必须使用像'Courier'这样的等宽字体。 Monospace字体表示每个char具有相同的宽度。当您知道每个char有多少px时，您可以计算字符串的宽度。在每个按键上计算string.length*char_width，这是键入文本的宽度，当此宽度大于输入宽度时，您将激活事件。

像这样。

function whenkeypressed(){
   var char_width=2px;//FOR EXAMPLE
   var input1= document.getElementById('id');
   var inputString=input1.value;
   var x=inputString.length*char_width;
   if(x>input1.width){
    alert(1);
   }
}
<input onkeyup="whenkeypressed()"> <!-- THIS INPUT FONT NEEDS TO BE MONOSPACE -->

将编写的代码更多地用作伪代码，我不确定我是否写得正确。