当文本填充可见长度的输入时阻止输入

Question

我有一个绝对位于画布元素上方的html输入。宽度设置为与背景中画布元素的右边框（突出显示）相符。

根据用户将绿色圆圈放到输入左侧的位置，输入实际上会附加到较大的canvas元素上：

maxlength

当文本填充输入的可见宽度时，如何防止用户输入。在下面的示例中，文本应停止，当用户输入另一个键时，应避免输入：

“ dsadss”

我想避免在输入更多输入时文本光标随即移动，即默认行为：

“ dsadssssss”

---

我以前曾考虑过使用诸如oninput和var startDate = new Date(startValue); // start time var endDate = new Date(endValue); //end tme var diff = endDate - startDate; 事件之类的属性，但是无法提出具有这种预期效果的任何组合

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"  />