Переполнение видимой части поля ввода

Question

Есть ли способ обработать событие, когда последний видимый символ вводится в поле input?
На скриншоте ниже, это момент нажатия уплотнительные ключ

Заранее спасибо

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

Насколько я знаю, это может быть сделано, но это не только одно событие.

Вы должны использовать моноширинный шрифт, например «Курьер». Моношибковый шрифт означает, что каждый символ имеет ту же ширину. Когда вы знаете, сколько пикселей идет для каждого символа, вы можете рассчитать ширину строки. На каждом ключевом расчете вычисляется 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 --> 

Использовать написанный код еще как псевдокод, я не уверен, правильно ли я его написал.