约束输入框前几位不可变

最新推荐文章于 2023-03-23 16:52:24 发布

LxcJie

最新推荐文章于 2023-03-23 16:52:24 发布

阅读量2.2k

点赞数

分类专栏： javascript 文章标签： function character javascript input class html

本文链接：https://blog.csdn.net/lxcjie/article/details/90323

版权

javascript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

在我们开发系统中,曾有过这种需求,就是使文本框中前几位的内容不可变,这里对这个功能进行封装,只需要在输入框中引入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>

LxcJie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
约束输入框前几位不可变

在我们开发系统中,曾有过这种需求,就是使文本框中前几位的内容不可变,这里对这个功能进行封装,只需要在输入框中引入css样式即可. 希望对大家有所帮助..notChangePartValue{ input:expression(regInput(this));}function regInput(obj){ obj.ondrop = function
复制链接

扫一扫