jQuery文本框默认值自动清除和填充的实现

  • Post author:
  • Post category:其他


<ol><li><span style="font-family: Arial, Helvetica, sans-serif;"><script type="text/javascript"></span></li><li><span style="font-family: Arial, Helvetica, sans-serif;">$(document).ready(function(){</span></li><li><span style="font-family: Arial, Helvetica, sans-serif;">var i = 0;</span></li><li><span style="font-family: Arial, Helvetica, sans-serif;">	</span><span style="font-family: Arial, Helvetica, sans-serif;">$("input").on("focus blur",function(){</span></li><li><span style="font-family: Arial, Helvetica, sans-serif;">		</span><span style="font-family: Arial, Helvetica, sans-serif;">//this  表示当前操作对象。是dom对象,可以通过this.value获得值</span></li><li><span style="font-family: Arial, Helvetica, sans-serif;">		</span><span style="font-family: Arial, Helvetica, sans-serif;">//$(this).val(i++);</span></li><li><span style="font-family: Arial, Helvetica, sans-serif;">		</span><span style="font-family: Arial, Helvetica, sans-serif;">// * 判断当前对象是否被选中 , is() 用于判断</span></li><li><span style="font-family: Arial, Helvetica, sans-serif;">		</span><span style="font-family: Arial, Helvetica, sans-serif;">if($(this).is(":focus")){</span></li><li><span style="font-family: Arial, Helvetica, sans-serif;">			</span><span style="font-family: Arial, Helvetica, sans-serif;">//获得焦点 --只有内容为默认值时才清空</span></li><li><span style="font-family: Arial, Helvetica, sans-serif;">			</span><span style="font-family: Arial, Helvetica, sans-serif;">if( $(this).val() == $(this).attr("defaultValue") ){</span></li><li><span style="font-family: Arial, Helvetica, sans-serif;">				</span><span style="font-family: Arial, Helvetica, sans-serif;">$(this).val("");</span></li><li><span style="font-family: Arial, Helvetica, sans-serif;">			</span><span style="font-family: Arial, Helvetica, sans-serif;">}</span></li><li><span style="font-family: Arial, Helvetica, sans-serif;">		</span><span style="font-family: Arial, Helvetica, sans-serif;">} else {</span></li><li><span style="font-family: Arial, Helvetica, sans-serif;">			</span><span style="font-family: Arial, Helvetica, sans-serif;">//失去焦点  , attr() 通过属性名获得值 -- 如果没有内容,使用默认值</span></li><li><span style="font-family: Arial, Helvetica, sans-serif;">			</span><span style="font-family: Arial, Helvetica, sans-serif;">if ($(this).val() == "") {</span></li><li><span style="font-family: Arial, Helvetica, sans-serif;">				</span><span style="font-family: Arial, Helvetica, sans-serif;">$(this).val($(this).attr("defaultValue"));</span></li><li><span style="font-family: Arial, Helvetica, sans-serif;">			</span><span style="font-family: Arial, Helvetica, sans-serif;">}</span></li><li><span style="font-family: Arial, Helvetica, sans-serif;">		</span><span style="font-family: Arial, Helvetica, sans-serif;">}</span></li><li><span style="font-family: Arial, Helvetica, sans-serif; font-weight: bold;">});</span></li><li> </li><li><input type="text" value="请输入账号" defaultValue="请输入账号" /></li><li><input type="text" value="请输入密码" defaultValue="请输入密码"/>
</li></ol>



版权声明:本文为IT4167555原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。