jquery实用技巧输入框提示语句

我们在写网页的时候难免会遇到输入框，那么怎样才能把输入框设计得更优雅呢？不同的人会有不同的答案。让我们分享一个好的设计。

翻译

详述

这种效果主要是通过JQuery实现的。我的想法如下：

在输入框获得鼠标焦点之前，显示原标签的值属性值；获得鼠标焦点后，如果当前值有值，则清除，否则恢复；特别注意密码箱，这将在后面解释。

实现的代码如下：

$('#address ')。focus(function(){ var address _ text=$(this))。val()；如果(address_text=='请输入电子邮件地址'){$(this)。val(“”)；} });$('#address ')。blur(function(){ var address _ value=$(this))。val()；If (address _ value=='') {$ (this)。val('请输入电子邮件地址')} })；完整的小例子

完整代码如下，特别注意实现输入类型='text' id='password '！

！doctype html head metaharset=' utf-8 ' title文本输入框中内容的提示效果/title脚本类型=' text/JavaScript ' src=' http : jquery-2 . 2 . 4 . min . js '/script/head dyscript $(function(){ $(' # address ')。focus(function(){ var address _ text=$(this))。val()；如果(address_text=='请输入电子邮件地址'){$(this)。val(“”)；} });$('#password ')。focus(function(){ var password _ text=$(this))。val()；如果(password_text=='请输入密码'){$(此处)。attr('type '，' password ')；$(这个)。val(“”)；} });$('#address ')。blur(function(){ var address _ value=$(this))。val()；If (address _ value=='') {$ (this)。val('请输入电子邮件地址')} })；$('#password ')。模糊(function(){ var password _ value=$(this))。val()；if(password_value==''){ $(this)。attr('type '，' text ')；$(这个)。val('请输入密码')} })；});/script div align=' center '输入类型=' text' id=' address '值='请输入电子邮件地址' brbr输入类型=' text' id=' password '值='请输入密码' brbr输入类型='button '名称=' login '值=' login'/div/body/html即$(document)。ready(函数(){ })；的缩写。这不是重点。

$(这个)。attr(“类型”、“密码”)；动态改变当前对象的属性值(即获取鼠标焦点的输入框)。当输入数据时，它以密码框的形式出现。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。