本人一直负责手头项目的基础表单可视化模块【表单定制】的开发。首先说一下,表单定制,为其它功能模块提供基础操作的表单,当业务新增时候,无需开发人员2次书写代码开发页面,而只需要在表单定制模块根据业务需求,拖拽对应的控件来制作相应的页面,然后发布即可满足实际业务需求。
表单定制控件之IP:
1 HTML
<input name="kk" id="kk" type="text" />
2 CSS
div.ipinput_div {
display: inline-block;
width : 142px;
height : 26px;
border-color : #86A3C4;
border-style : solid;
border-width : 1px;
background-color : #ffffff;
}
input.ipinput_input {
border-color : #b99d7f;
border-style : solid;
border-width : 0px;
background-color : #ffffff;
width : 30px;
height : 24px;
}
span.ipinput_separator {
border-color: #c4160f;
border-style: solid;
border-width: 0px;
font-weight: bolder;
text-align: right;
height: 22px;
display: inline-block;
}
3 JS
(function () {
$.fn.ipinput = function (options) {
// 默认属性
var defaults =
{
// 长度最低支持110像素
width: 148,
// 高度默认20像素
height: 26,
// 预先存在的值
value: ''
}
// 传递的参数
var options = $.extend(defaults, options);
// 隐藏输入框(该输入框用于存储实际值)
var $this = $(this);
$(this).attr({style: 'display:none'});
// 输入控件代码
var html = "";
html += "<div class='ipinput_div' >";
html += "<input type='text' id='ip1' style='ime-mode:disabled;' οnpaste='return false;' class='ipinput_input'/>";
html += "<span class='ipinput_separator'>.</span>";
html += "<input type='text' id='ip2' style='ime-mode:disabled;' οnpaste='return false;' class='ipinput_input'/>";
html += "<span class='ipinput_separator'>.</span>";
html += "<input type='text' id='ip3' style='ime-mode:disabled;' οnpaste='return false;' class='ipinput_input'/>";
html += "<span class='ipinput_separator'>.</span>";
html += "<input type='text' id='ip4' style='ime-mode:disabled;' οnpaste='return false;' class='ipinput_input'/>";
html += "</div>";
// 添加输入控件代码
$(this).parent().append(html);
// 把原有的值赋到输入框中
if (options.value) {
var valArr = options.value.split(".");
if (4 == valArr.length) {
$('#ip1').val(valArr[0]);
$('#ip2').val(valArr[1]);
$('#ip3').val(valArr[2]);
$('#ip4').val(valArr[3]);
}
}
// 设置宽度和高度
$('.ipinput_div').width(options.width);
$('.ipinput_div').height(options.height);
// 输入框绑定键盘按下事件,只允许输入数字
$('.ipinput_input').keypress(function (event) {
var keyCode = event.keyCode;
var val = $(this).val();
var len = val.length;
// 限制输入数字,且最多输入3位数
if ((keyCode >= 48 && keyCode <= 57)) {
event.returnValue = true;
} else {
// 阻止默认行为
event.returnValue = false;
event.preventDefault();
}
if (len > 2) {
event.returnValue = false;
event.preventDefault();
}
});
// 输入框绑定键盘按下弹起事件
$('.ipinput_input').keyup(function (event) {
var id = $(this).attr("id");
var len = $(this).val().length;
if (len == 3) {
if (id == "ip1") {
$("#ip2").focus();
} else if (id == "ip2") {
$("#ip3").focus();
} else if (id == "ip3") {
$("#ip4").focus();
}
}
});
// 输入框失去焦点事件
$('.ipinput_input').blur(function () {
var one = $('#ipOne').val();
var two = $('#ipTwo').val();
var three = $('#ipThree').val();
var four = $('#ipFour').val();
var ip = one + "." + two + "." + three + "." + four;
$this.val(ip);
});
};
})(jQuery);
4 使用方法
$("#kk").ipinput({
value : "127.0.0.1"
});
5 效果图