禁用文本框中的第一个字符

时间:2014-07-11 10:25:59

标签: javascript jquery

我有一个文本框,它包含一个值“Given Name”。我想禁用文本框的第一个字符,以便用户无法使用退格键或任何其他方法更改文本框中的First Charcter。 例如:假设文本框包含值“Given Name”。我希望用户不能使用退格或任何其他方式更改第一个字符“G”。

<input type="text" id="nameId" onkeydown="validate(this.val)"/>

下面是javscript函数:

function validate2(val) {
  // have no idea how to do.

}

我不知道如何在Javscript或Jquery中这样做。

5 个答案:

答案 0 :(得分:2)

你可以这样做:

$("#nameId").on("keydown", function(e) {
  // if user writes a char at index === 0 that is not an arrow or HOME or END
  if (($(this).get(0).selectionStart === 0 && (e.keyCode < 35 || e.keyCode > 40))
    // or if user tries to erase first char
    || ($(this).get(0).selectionStart === 1 && $(this).get(0).selectionEnd === 1 && e.keyCode === 8)) {
    // don't write the character
    return false;
  }
});

// prevent right click
$("#nameId").bind("contextmenu", function(e) {
  e.preventDefault();
});

<强> JSFIDDLE

答案 1 :(得分:1)

不打算回答,留下评论,但在看到其他答案后,我认为我可能会快速回答:

html:

<input type="text" id="nameId" value="Given Name" onkeydown="save(this,event)" onkeyup="restore(this,event)" onchange="restore(this,event)"/>

javascript:

function restore(el,event) {
    if(el.value.length == 0){
        el.value = el.dataset.value.substr(0,1);
    }else{
        el.dataset.value = el.value;
    }
}
function save(el,event) {
    var key = event.which || event.charCode || event.keyCode;
    if((key === 8 && el.value.length === 1)
           || (key === 46 && el.selectionStart == 0 && el.value.length === 1)){
        event.preventDefault();
    }
    if(el.value.length > 0){
        el.dataset.value = el.value;
    }
}

方法是不要过多地防止删除实际角色(只是非常简单的基础),而是确保如果有人删除第一个角色以便总是以某种方式恢复它。它创建的代码易于理解和维护,但工作得非常整齐。也可以找到一个小提琴here请注意event.which并不是最常见的浏览器一致界面,所以要么使用jQuery,要么在生产中使用它之前检查其他浏览器。以一种应该工作的方式编辑它跨浏览器,包括旧浏览器。

答案 2 :(得分:0)

你可以试试这个: -

<input type="text" id="nameId" value="Given Name" onkeydown="validate(this.value,event)"/>
    <script>

       function validate(val,event) {
            // have no idea how to do.
            if(event.target.selectionStart != undefined && (event.which === 46 ||event.which === 8)){
                var startPos = event.target.selectionStart,
                endPos = event.target.selectionEnd;
                 console.log(startPos,endPos);
                if(startPos === 0 && startPos != endPos){
                    var restPart = val.slice(endPos,val.length);
                    if(restPart){
                        val = val[0].concat(restPart);
                    } else{
                        val = val[0] 
                    }
                    event.target.value = val;
                    event.preventDefault();  
                } else if(startPos === 0 && startPos === endPos && event.which === 46){
                   event.preventDefault();  
                } else if(startPos === 1 && event.which === 8){
                    event.preventDefault(); 
                }

            }
        } 
    </script>

答案 3 :(得分:0)

这是我的版本。

<强> HTML

<input type="text" id="nameId" value="Given Name" />

<强> JS

var lastentry = ''; 

$("#nameId").on("keyup", function(e) {
    var targetValue = $(e.currentTarget).attr('value');
    var targetValueLength =  targetValue.length;
    var inputValue = this.value;

    if(checkChanges(targetValueLength, targetValue, inputValue))
        this.value = targetValue + lastentry;
    else
        lastentry = this.value.slice(targetValueLength)
});

function checkChanges(targetValueLength, targetValue, inputValue)
{
     for(var i = 0; i < targetValueLength ; i++)
    {
        if(targetValue[i] != inputValue[i])        
            return true;
    } 
    return false;
}

Demo

答案 4 :(得分:-2)

嗨使用它,它不允许删除第一个字符,

  $(document).keydown(function(e)
  {

   var value =  $('#nameId').val().length;

    if ( e.keyCode == 8 && value < 2)
       e.preventDefault();
   });