各位一定要帮我这个忙，怎样用文本框实现添写IP框的那种效果呢？

<!-- 
Web Site: http://piggydesign.yeah.net/
Author: Cloudchen
E-mail: [email protected]
Copyright to: piggydesign
-->
<STYLE TYPE="text/css">
<!--
body { background: buttonface;}
input { font-size: 11px;font-family: "Tahoma";height:16px; width: 23px;border: 1px none;}
.input { border: 2px inset; background: #ffffff;}
-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
function checkData() {
if ((event.keyCode < 48 || event.keyCode > 57) && event.keyCode != 9) { return false;}
}
function moveCursor(ip) {
var err
if (ip.value.length == 3) {
var cur_index = parseInt(ip.name.substr(2,1));
var temp_index = parseInt(ip.name.substr(2,1));
if (cur_index == 1) {
if (ip.value > "233" || ip.value == "0") {
alert(ip.value+"不是一个有效项目。请指定一个介于1和233之间的数值");
ip.value = "";
cur_index = "ip"+cur_index;
err = true;
}
} else {
if (ip.value > "255") {
alert(ip.value+"不是一个有效项目。请指定一个介于0和255之间的数字");
ip.value = "";
cur_index = "ip"+cur_index;
err = true;
}
}
if (cur_index != 4) {
if (err == true) {
cur_index = "ip"+(temp_index);
} else {
cur_index = "ip"+(++temp_index);
}
document.form(cur_index).select();
} else {
document.form("ip1").select();
}
}
}
</SCRIPT>
<FORM name="form">
<span class="input"><INPUT TYPE="text" NAME="ip1" maxlength="3" size="3" onKeyup="return moveCursor(this)" onKeyDown="return checkData()">.<INPUT TYPE="text" NAME="ip2" maxlength="3" size="3" onKeyup="return moveCursor(this)" onKeyDown="return checkData()">.<INPUT TYPE="text" NAME="ip3" maxlength="3" size="3" onKeyup="return moveCursor(this)" onKeyDown="return checkData()">.<INPUT TYPE="text" NAME="ip4" maxlength="3" size="3" onKeyup="return moveCursor(this)" onKeyDown="return checkData()"></span>
</FORM>