Запретить ввод, когда текст заполняет видимую длину ввода

Question

У меня есть ввод HTML, который абсолютно расположен над элементом холста.Ширина устанавливается так, чтобы соответствовать правой границе элемента холста на заднем плане (выделено).

Входные данные фактически добавляются к большему холстуэлемент, основанный на том, где пользователь опускает зеленый кружок слева от ввода:

var input = jQuery('<div><input id="edit-annotation-input" ' + 'style="z-index: 100; position: absolute; top:' + (this.textPosition.y - 9) + 'px; left:'+ (this.textPosition.x + 8) +'px; width: ' + (610 - 7 - this.textPosition.x) + 'px; border: none; color: #0bac3a; outline: none; background-color: transparent !important; padding: 0px; font-family: arial; font-size: 12pt; " ' + 'spellcheck="false" type="text" name="mytext[]" value="'+string+'"/></div>'); jQuery("div #pad").append(input);

Как можно предотвратить ввод пользователя, когда текст заполняет видимую ширину ввода.Текст должен быть остановлен в следующем примере, когда пользователь вводит другую клавишу, ввод должен быть запрещен:

"dsadss"

Я хочу избежатьтекстовый курсор просто перемещается, когда вводится больше входных данных, то есть так, как показано по умолчанию:

"dsadsssss"

---

Ранее я рассматривал использование таких свойств, как maxlength и событие oninput, но не удалось придумать ни одной комбинации, которая имела бы этот желаемый эффект

Answer 1

Это пример надежды, который поможет вам, или вы можете обратиться к нему, чтобы решить вашу проблему.

$("input[name=testInput]").on('keydown keyup',function(event){ 
   var $that = $(this);
   var widthOfInput = getWidthOfInput(document.getElementById("testInput")) ;
   var cssWidth = $that.width();
   //console.log('widthOfInput'+ widthOfInput);
   //console.log('widthInputCss'+ widthInputCss);
   
   // accept key backspace
   var key = event.keyCode || event.charCode; 
   if( key == 8 || key == 46 ){
        return true;
   } 
   
   // check limit input
   if(cssWidth < widthOfInput){
      event.preventDefault();
   }
       
});


function getWidthOfInput(inputEl) {
  var tmp = document.createElement("span");
  tmp.className = "input-element tmp-element";
  tmp.innerHTML = inputEl.value.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
  document.body.appendChild(tmp);
  var theWidth = tmp.getBoundingClientRect().width;
  document.body.removeChild(tmp);
  return theWidth;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="testInput" name="testInput" style="width:100px"  />