如何使文本输入的一部分不可编辑？

Question

所以我有一个文本输入

<input type="text" value="+98912314789" class="telinfo">

有没有办法从头开始保留 4 个字母？我想保持+9891只读状态，用户可以删除除此部分之外的此文本框的所有部分。

Answer 1

您可以捕获keyupand blur（如果用户直接复制粘贴文本框中的值）事件

function handleEv( event )
{
   var thisObj = event.currentTarget;
   var fixedValue = thisObj.getAttribute( "data-fixedvalue" );
   if ( thisObj.value.indexOf( fixedValue )  != 0 )
   {
      console.log(thisObj.value, fixedValue);
      event.preventDefault();
      thisObj.value = fixedValue;
   }
}

示例实现演示

function handleEv( event )
{
   var thisObj = event.currentTarget;
   var fixedValue = thisObj.getAttribute( "data-fixedvalue" );
   if ( thisObj.value.indexOf( fixedValue )  != 0 )
   {
      console.log(thisObj.value, fixedValue);
      event.preventDefault();
      thisObj.value = fixedValue;
   }
}

var el = document.querySelector( ".telinfo" );
el.addEventListener( "keyup", handleEv);
el.addEventListener( "blur", handleEv);


function handleEv( event )
{
   var thisObj = event.currentTarget;
   var fixedValue = thisObj.getAttribute( "data-fixedvalue" );
   if ( thisObj.value.indexOf( fixedValue )  != 0 )
   {
      console.log(thisObj.value, fixedValue);
      event.preventDefault();
      thisObj.value = fixedValue;
   }
}