//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='width:" + 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", "width:" + 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", "width:" + context.width + "px; height:" + context.height + "px;border: 1px solid #95B8E7;color:#cacacd;");
}
else
$textbox.attr("style", "width:" + 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='width:" + 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", "width:" + context.width + "px; height:" + context.height + "px;border: 1px solid #95B8E7;")
}
else if (string.match(context.validateString) == null) {
$textbox_validate.attr("style", "width:" + 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", "width:" + 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=' width:" + 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]*$");
//});

自定义控件之 TextBox的更多相关文章

  1. Web控件

    Web控件可分三类 HTML控件 html服务器控件是在HTML控件的基础上,额外增加了一个在当前页面唯一的ID属性值和一个runat = "server" 属性html服务器控件 ...

  2. WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式、水印、Label标签、功能扩展

    一.前言.预览 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要是对文本 ...

  3. WinForm程序中的类TextBox的自定义控件, 添加失去焦点的功能

    原理: 一.在控件的后台代码中, 添加布尔类型的属性CanFocus 二.在控件的构造函数中, 注册Enter事件的处理方法. 并在处理方法中,根据CanFocus属性的值来决定是否可以丢失焦点, 如 ...

  4. TextBox自定义控件

    首先来一发图: 今天主要说的textBox内部给予提示: 使用自定义控件方式:TextBoxTip继承TextBox 利用TextBox的背景画刷功能 VisualBrush是一种比较特殊的笔刷,它的 ...

  5. 【转】WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式、水印、Label标签、功能扩展

    一.前言.预览 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等. 本文主要是对文本输入控件进行样式开发,及相关扩展功能开发,主要内容包括: 基本文 ...

  6. WinForm自定义控件–TextBox扩展

      一.简单回顾 在前两节中,对Panel和GroupBox控件进行了相关的扩展应用,主要都是设置控件的边框以及边框颜色等.本节,继续对WinForm现有的控件TextBox进行扩展,来满足实际开发中 ...

  7. 工作记录--WPF自定义控件,实现一个可设置编辑模式的TextBox

    原文:工作记录--WPF自定义控件,实现一个可设置编辑模式的TextBox 1. 背景 因为最近在使用wpf开发桌面端应用,在查看页面需要把TextBox和Combox等控件设置为只读的.原本是个很简 ...

  8. (八十九)c#Winform自定义控件-自定义滚动条(treeview、panel、datagridview、listbox、listview、textbox)

    官网 http://www.hzhcontrols.com/ 前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. GitHub:https://github.com/kw ...

  9. WPF自定义控件(二)——TextBox

    和之前一样,先来看看效果: 这个TextBox可设置水印,可设置必填和正则表达式验证. 验证?没错,就是验证! 就是在输入完成后,控件一旦失去焦点就会自动验证!会根据我开放出来的“是否可以为空”属性进 ...

随机推荐

  1. ASP.NET MVC URL重写与优化(1)-使用Global路由表定制URL

    ASP.NET MVC URL重写与优化(1)-使用Global路由表定制URL 引言--- 在现今搜索引擎制霸天下的时代,我们不得不做一些东西来讨好爬虫,进而提示网站的排名来博得一个看得过去的流量. ...

  2. 《zw版·Halcon-delphi系列原创教程》 Halcon分类函数010,obj,对象管理

    <zw版·Halcon-delphi系列原创教程> Halcon分类函数010,obj,对象管理 为方便阅读,在不影响说明的前提下,笔者对函数进行了简化: :: 用符号“**”,替换:“p ...

  3. 配置文件之SharedPreferences

    新建配置文件类 /** * Created by RongGuang * 应用程序配置信息 */ public class AppOption { public static final String ...

  4. DDL、DML、DCL的理解

    1.DDL       1-1.DDL的概述                DDL(Data Definition Language 数据定义语言)用于操作对象和对象的属性,这种对象包括数据库本身,以 ...

  5. Python—Socket

    Socket模块 socket通常也称作"套接字",用于描述IP地址和端口,是特定网络协议如TCP/IP.UDP/IP套件对网络应用程序提供者提供的当前可移植标准的对象, 用来连接 ...

  6. windows+caffe(一)——自己环境

    环境:win7 旗舰版升级到sp1 虚拟机 无GPU vs2013 matlab2016a python2.7 安装caffe已经成功 安装过程见我的另一篇:http://www.cnblogs.co ...

  7. Object类型与Array类型

    总结--JS中的引用类型: Object类型,Array类型,Boolean类型,Number类型,String类型,Date类型, Function类型,RegExp类型,单体内置对象(Global ...

  8. Android 进阶 Android 中的 IOC 框架 【ViewInject】 (下)

    上一篇博客我们已经带大家简单的吹了一下IoC,实现了Activity中View的布局以及控件的注入,如果你不了解,请参考:Android 进阶 教你打造 Android 中的 IOC 框架 [View ...

  9. selenium高亮显示操作步骤方法

    package com.allin.pc;import java.util.List;import org.openqa.selenium.WebElement;import org.openqa.s ...

  10. 调用discuz编辑器再也不是问题了

    前面讲了如何开发一个discuz的特殊主题插件,详情可在此查看discuz特殊主题插件开发步骤和犯的愚蠢错误.上一篇文章讲解的是一些简单的开发步骤,不涉及到具体的编码.网页编辑器之类的都是系统默认带过 ...