Question

我有一个移动号码的输入字段，我希望在输入字段“+91”内部始终对用户可见..意味着他无法删除它。

所以我打算在INPUT FIELD的值等于+91

时禁用BACKSPACE和DELETE按钮

在FIREFOX中，startegy对我来说很好，但它全都搞砸了。

我google了很多但是却找不到任何在CHROME中禁用Backspace的成功代码。：（

这是我的FIREFOX代码

<script  language="JavaScript" type="text/javascript">
document.onkeypress = function(e)  // FireFox/Others 
    {
    var t=e.target.id;
    var kc=e.keyCode;
    if ((kc == 8 || kc == 46) && t == "phonen" && document.getElementById(t).value=="+91")
    { e.preventDefault();
        return false;}
    else {
                return true

    }
   }
   function sett(e)
   {e.value="+91";}
</script>

任何人都可以建议我如何在CHROME中做同样的事情

Answer 1

正如我在评论中写的那样......甚至不用这种方法。只是假装它。这是一种简单的方法（尽管你可能想调整字体，间距等）：

<强> HTML ：

<div class="prefix-wrapper">
  <span class="prefix">+91</span>
  <input type="text" value="">
</div>

<强> CSS ：

.prefix-wrapper {
  position: relative;
}

.prefix-wrapper .prefix {
  position: absolute;
  z-index: 2;
  top: 3px;
  left: 5px;
  color: #999;
}

input {
  padding-left: 30px;
}

演示：http://jsbin.com/elatot/1/

Answer 2

用户仍然可以点击鼠标或移动光标并编辑 +91 字符串。

我建议您将.keyup和.change处理程序绑定到您的输入，然后检查它是否包含您的前缀（请注意，jQuery会更容易）。像这样：

$('#your_input_id').on('keyup change', function() {
  if ( $(this).val().indexof('+91') != 0) $(this).val('+91');
});

Answer 3

尝试使用jQuery：

// HTML代码

<input type="text" name="phone" id="phone" class='phone' placeholder='+918888888888' value='' maxlength='13' />

// jQuery代码

$(document).keydown(function (e) {
    var l = $('.phone').val().length;
    var elid = $(document.activeElement).hasClass('phone');
    if (e.keyCode === 8 && elid && l == 3) {
        return false;
    } else {
        return true;
    }
});

<强> Fiddle DEMO

Answer 4

不使用jQuery的解决方案是直接连接到change / keyup事件：

var checkPhone = function (e) {
    if (e.target.value.indexOf('+91') != 0) {
        e.target.value = '+91';
    }
}
var phoneElement = document.getElementById('phonen');
phoneElement.onchange = checkPhone;
phoneElement.onkeyup = checkPhone;

在chrome中禁用BACKSPACE

4 个答案: