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

在自己的网页中,常常要实现指定样式的输入框,当输入框中没有输入或只输入空格等无效信息时,自动显示指定的文本,以提醒用户应该如何操作,下面是具体实现方法,仅供参考。

【解决方案】

  1. 准备工作

  (1)输入框

复制代码 代码如下:


<input type="text" 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. 参考文章

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdffyp.html