浏览 4768 次
|
锁定老帖子 主题：为输入控件设置提示文本(jquery实现)
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2008-10-28
在需要用户输入信息时,在form中的input/textarea等文本输入控件都会在前头有一个文本提示应该输入什么信息,如果留给form的页面位置太少,那么留给输入框的位置就更少了.有很多网站是把这些提示信息显示在输入控件上,当用鼠标点击这些文本输入控件的时候再清空,等待用户输入.参考了一些别人写的东西,自己做了一个示例. html中的body部分: <body> <form action="#" method="post" id="form"> <p> <label for="username">在此输入姓名</label> <input type="Text" name="username" id="username" value="" /> </p> <p> <label for="password">在此输入验证码</label> <input type="text" name="password" id="password" value="" /> </p> <p> <label for="something">输入一些东西吧</label> <textarea name="something" id="something" cols="50" rows="4"></textarea> </p> <input type="button" onclick="javascript:beforeSubmit();" value="提交前的处理" /> </form> </body> input对象和textarea对象都有一个label与之对应,用于设置默认的提示信息.页面初始化时,将label中的信息提取出来显示在对应的对象上,然后将该label隐藏.当用鼠标点击输入对象时,将默认信息清空.对象失去焦点时检查用户是否有数据输入,如果没有数据则恢复默认提示信息.下面是对应的javascript代码: $(document).ready(function() {
labelOnTip($("#form")); //选择需要处理的页面部分
});
function labelOnTip(container) {
container.find("label").each(function() { //循环container中的每个label
object = document.getElementById($(this).attr("for"));
if($(object).attr("type") == "text" || object.tagName.toLowerCase() == "textarea") {
var text = $(this).text(); //取出label中的值用于恢复默认值
$(this).css("display","none"); //设置label不可见
$(object).val(text).addClass("inactive") //设置输入控件的内容为默认值,设置CSS样式
.removeClass("active onfocuse");
//输入控件获得焦点时设置CSS样式,同时将value设为空接收输入
$(object).focus(function() {
$(this).addClass("onfocuse")
.removeClass("active inactive");
if($(this).val() == text) {
$(this).val("");
}
});
//输入控件焦点释放时,设置CSS样式,检查输入内容是否为空
$(object).blur(function() {
//如果输入内容为空恢复label设置的默认值
if($(this).val() == "") {
$(this).val(text);
$(this).addClass("inactive")
.removeClass("active onfocuse");
} else {
$(this).addClass("active")
.removeClass("inactive onfocuse");
}
});
}
});
}
这样当用户提交该form时,没有输入数据的对象的值是默认值.因此在提交form之前需要对这些输入控件做一些处理.下面是一个简单的处理方法,在提交之前检查输入控件的内容是否同对应label的值相同,若相同则将输入控件中默认数据清空: function beforeSubmit() {
//在表单提交之前,要将没有输入数值的控件的value属性置为空,
//防止提交对应label中设置的默认显示内容.
$("#form").find("label").each(function() { //循环form中的每个label
object = document.getElementById($(this).attr("for"));
if($(object).attr("type") == "text" || object.tagName.toLowerCase() == "textarea") {
var text = $(this).text(); //取出label中的值用于恢复默认值
if($(object).val() == text) {
$(object).val(""); //value置空
}
alert($(object).attr("name") + ":" + $(object).val());
}
});
}
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
