自定义控件之 TextBox

//textbox type
var boxType = {
WaterMarkBox: 0,
ValidateBox: 1,
SearchBox: 2
}
var textBoxObj = function(vid){
this.id = vid; //textbox's id
this.validateString = ""; //validate string
this.waterMarkString = "please fill the content"; //watermark string
this.width = 300; //textbox width
this.height = 22; //textbox height
this.type = boxType.WaterMarkBox; //textbox type
this.imgUrl = "graphics/search.png";
}

//set textbox width
textBoxObj.prototype.setWidth = function (wid) { this.width = wid };

//set textbox height
textBoxObj.prototype.setHeight = function (hei) { this.height = hei };

//set textbox type
textBoxObj.prototype.setType = function (tp) { this.type = tp };

//initial textbox
textBoxObj.prototype.initBox = function () {
var context = this;
if (context.type == boxType.WaterMarkBox) {
var $textbox = $("<input id='" + context.id + "_ipt' type='text' style='" + context.width + "px; height:" + context.height + "px;border: 1px solid #95B8E7;color:#cacacd;'/>");
$("#" + context.id).append($textbox);
$textbox.val(context.waterMarkString);
$textbox.on("focus", function () {
if ($textbox.val() == context.waterMarkString) {
$textbox.val("");
}
$textbox.attr("style", "" + context.width + "px; height:" + context.height + "px;border: 1px solid #C0FF00;");
});
$textbox.on("focusout", function () {
if ($textbox.val() == "") {
$textbox.val(context.waterMarkString);
$textbox.attr("style", "" + context.width + "px; height:" + context.height + "px;border: 1px solid #95B8E7;color:#cacacd;");
}
else
$textbox.attr("style", "" + context.width + "px; height:" + context.height + "px;border: 1px solid #95B8E7;");
});
}
else if (context.type == boxType.ValidateBox) {
var $textbox_validate = $("<input id='" + context.id + "_ipt' type='text' style='" + context.width + "px; height:" + context.height + "px;border: 1px solid #95B8E7;'/>");
$("#" + context.id).append($textbox_validate);
$textbox_validate.on("change",function () {
var string = $textbox_validate.val().trim();
if (string == "") {
$textbox_validate.attr("style", "" + context.width + "px; height:" + context.height + "px;border: 1px solid #95B8E7;")
}
else if (string.match(context.validateString) == null) {
$textbox_validate.attr("style", "" + context.width + "px; height:" + context.height + "px;border: 1px solid #95B8E7;background-color: #FC6B6B;background-image: url(graphics/fault.png);background-repeat: no-repeat;background-position: right center;");
}
else {
$textbox_validate.attr("style", "" + context.width + "px; height:" + context.height + "px;border: 1px solid #95B8E7;background-image: url(graphics/pass.png);background-repeat: no-repeat;background-position: right center;");
}
});

}
else if (context.type == boxType.SearchBox) {
$textbox_search = $("<input type='text' style=' " + context.width + "px; height:22px;border: 1px solid #95B8E7; background-image: url("+context.imgUrl+");background-repeat: no-repeat;background-position: right center;' />");
$("#" + context.id).append($textbox_search);
$textbox_search.on("keydown", function (key) {
if (key.keyCode == "13") {
context.onSearch($textbox_search.val());
}
});
}
}

//press enter and search event
textBoxObj.prototype.onSearch = function (content) {
alert(content);
}

//set validate rule
textBoxObj.prototype.setValidateString = function (rule) {
this.validateString = rule;
}

//set watermark message
textBoxObj.prototype.setWaterMarkString = function (watemark) {
this.waterMarkString = watemark;
}

//for test
//$(function () {
// var o = new textBoxObj('cc2');
// o.setType(boxType.ValidateBox);
// o.initBox();
// o.setValidateString("^[0-9]*$");
//});