首頁 > web前端 > js教程 > 基于jQuery的输入框无值自动显示指定数据的实现代码_jquery

基于jQuery的输入框无值自动显示指定数据的实现代码_jquery

WBOY
發布: 2016-05-16 18:11:29
原創
1003 人瀏覽過

【解决方案】

  1. 准备工作

  (1)输入框

复制代码 代码如下:



  (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/
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板