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

  【解决方案】

  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/