手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >基于jQuery的输入框无值自动显示指定数据的实现代码
基于jQuery的输入框无值自动显示指定数据的实现代码
摘要:【解决方案】1.准备工作(1)输入框复制代码代码如下:(2)CSS代码复制代码代码如下:input.helpText{color:#aaa;...

【解决方案】

1. 准备工作

(1)输入框

复制代码 代码如下:

<input type="text" name="searchText" title="请输入搜索关键字" />

(2)CSS代码

复制代码 代码如下:

input.helpText { color: #aaa;}

(3)转换方法

复制代码 代码如下:

function switchText()

{

if ($(this).val() == $(this).attr('title'))

$(this).val('').removeClass('helpText');

else if ($.trim($(this).val()) == '')

$(this).addClass('helpText').val($(this).attr('title'));

}

(4)具体实现

复制代码 代码如下:

$('input[type=text][title!=""]').each(function() {

if ($.trim($(this).val()) == '') $(this).val($(this).attr('title'));

if ($(this).val() == $(this).attr('title')) $(this).addClass('helpText');

}).focus(switchText).blur(switchText);

$('form').submit(function() {

$(this).find('input[type=text][title!=""]').each(function() {

if ($(this).val() == $(this).attr('title')) $(this).val('');

});

});

2. 参考文章

http://webservices.blog.gustavus.edu/2008/06/23/text-input-example-text-with-jquery/

【基于jQuery的输入框无值自动显示指定数据的实现代码】相关文章:

jquery中map函数遍历数组用法实例

将HTML自动转为JS代码

简单介绍JavaScript的变量和数据类型

一些有关检查数据的JS代码

基于jQuery实现的无刷新表格分页实例

Jquery动态添加输入框的方法

基于zepto的移动端轻量级日期插件--date

jQuery插件制作之全局函数用法实例

jQuery解析XML文件同时动态增加js文件的方法

自动检查并替换文本框内的字符

精品推荐
分类导航