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