约束输入框前几位不可变

来源：互联网发布：淘宝网儿童服装女装棉编辑：程序博客网时间：2024/06/11 16:01

在我们开发系统中,曾有过这种需求,就是使文本框中前几位的内容不可变,这里对这个功能进行封装,只需要在输入框中引入css样式即可.

希望对大家有所帮助.

<HTML>
<STYLE>
.notChangePartValue
{
    input:expression(regInput(this));
}
</STYLE>
<SCRIPT language="javascript">
function regInput(obj)
{
    obj.ondrop = function(){return false;}
    obj.oncontextmenu = function(){return false;}
    obj.onkeydown = function()
    {
        restrictInputValue(obj)
    }
}
/**
* added by LxcJie 2004.7.3
* 限制文本框的前几位不可以改变
* 在文本框的onKeyDown事件中调用restrictInputValue(this)
* 即使最初指定的value值不再允许改变
*/
function restrictInputValue(obj)
{
    var range = obj.createTextRange();
    //给相应的文本框设置一个自定义属性initWidth，用来保存起始value的宽度
    if(typeof(obj.initWidth) == "undefined")
    {
        obj.initWidth = range.boundingWidth;
    }
    var selRange = document.selection.createRange();
    //如果页面没有选中任何文字
    if(selRange.text.length == 0)
    {
        selRange.setEndPoint("StartToStart",range);
        var currentWidth = selRange.boundingWidth;
        if(currentWidth < obj.initWidth)
        {
            if(event.keyCode < 33 || event.keyCode > 40
                || event.keyCode == 46 || event.keyCode == 8)
                event.returnValue = false;
        }
        if(currentWidth == obj.initWidth)
        {
            if(event.keyCode == 8)
                event.returnValue = false;
        }
    }
    //页面选中文字
    else
    {
        selRange.moveEnd("character",-selRange.text.length);
        selRange.setEndPoint("StartToStart",range);
        var currentWidth = selRange.boundingWidth;
        if(currentWidth <= obj.initWidth-1)
        {
            //对于方向键和home，end，pageup，pagedown不限制
            if(event.keyCode < 33 || event.keyCode > 40)
                event.returnValue = false;
        }
    }
}
</SCRIPT>
<BODY>
<INPUT type="text" value="Soft" class="notChangePartValue">
</BODY>
</HTML>