jquery實用技巧之輸入框提示語句

更新時間：2016年07月28日 10:24:41 作者：Marksinoberg

輸入有效信息時會有一些提示語，比如“請輸入用戶名”和“請輸入密碼”等語言，這篇文章就為大家介紹js實用技巧之輸入框提示語句的實現(xiàn)方法，感興趣的小伙伴們可以參考一下

我們在編寫網(wǎng)頁的時候不可避免的會遇到輸入框，那么怎么設計輸入框才能更加優(yōu)雅呢？不同的人會有不同的答案，下面分享一個比較不錯的設計。

效果圖

細節(jié)

這個效果主要是通過JQuery來實現(xiàn)，我的思路如下：

輸入框獲取鼠標焦點之前，顯示原標簽的value屬性值；獲取了鼠標焦點之后，如果當前value有值，那就清空，否則恢復；密碼框特殊照顧，待會講。

實現(xiàn)的代碼如下：

$("#address").focus(function(){
    var address_text = $(this).val();
    if(address_text=="請輸入郵箱地址"){
      $(this).val("");
    }
  });
$("#address").blur(function(){
    var address_value = $(this).val();
    if(address_value==""){
      $(this).val("請輸入郵箱地址")
    }
  });

完整的小例子

完整的代碼如下，尤其注意<input type="text" id="password">的實現(xiàn)！

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>文本輸入框中內(nèi)容的提示效果</title>
  <script type="text/javascript" src="jquery-2.2.4.min.js"></script>
</head>
<body>
<script>
$(function(){
  $("#address").focus(function(){
    var address_text = $(this).val();
    if(address_text=="請輸入郵箱地址"){
      $(this).val("");
    }
  });
  $("#password").focus(function(){
    var password_text = $(this).val();
    if(password_text=="請輸入密碼"){
      $(this).attr("type","password");
      $(this).val("");
    }
  });
  $("#address").blur(function(){
    var address_value = $(this).val();
    if(address_value==""){
      $(this).val("請輸入郵箱地址")
    }
  });
  $("#password").blur(function(){
    var password_value = $(this).val();
    if(password_value==""){
      $(this).attr("type","text");
      $(this).val("請輸入密碼")
    }
  });
});
</script>
<div align="center">
  <input type="text" id ="address" value="請輸入郵箱地址"><br><br>
  <input type="text" id ="password" value="請輸入密碼"><br><br>
  <input type="button" name="登錄" value="登陸">
</div>
</body>
</html>

$(function(){});其就是$(document).ready(function(){});的縮寫。這個倒不是什么重點。

$(this).attr(“type”,”password”);將當前對象（也就是獲取鼠標焦點的輸入框）的屬性值進行動態(tài)的改變。達到輸入數(shù)據(jù)的時候以密碼框的形式出現(xiàn)。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

webpack4 CSS Tree Shaking的使用
這篇文章主要介紹了webpack4 CSS Tree Shaking的使用,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09
javascript開發(fā)實現(xiàn)貪吃蛇游戲
這篇文章主要為大家詳細介紹了javascript開發(fā)實現(xiàn)貪吃蛇游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-07-07
JavaScript實現(xiàn)256色轉(zhuǎn)灰度圖
本文主要介紹了JavaScript實現(xiàn)256色轉(zhuǎn)灰度圖的示例代碼，具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
淺析微信小程序modal彈窗關閉默認會執(zhí)行cancel問題
這篇文章主要介紹了小程序modal彈窗關閉默認會執(zhí)行cancel方法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-10-10
JavaScript?中的運算符和表達式介紹(二)
這篇文章主要介紹了JavaScript?中的運算符和表達式介紹，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
2022-09-09
js 博客內(nèi)容進度插件詳解
本篇文章主要介紹了博客內(nèi)容進度插件的實現(xiàn)方法，具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
js仿搜狐視頻記錄片列表展示效果
這篇文章主要為大家詳細介紹了js仿搜狐視頻記錄片列表展示效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-01-01
Webpack4 使用Babel處理ES6語法的方法示例
這篇文章主要介紹了Webpack4 使用Babel處理ES6語法的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-03-03
JavaScript使用HTML5的window.postMessage實現(xiàn)跨域通信例子
這篇文章主要介紹了JavaScript使用HTML5的window.postMessage實現(xiàn)跨域通信例子,需要的朋友可以參考下
2014-04-04
利用JS實現(xiàn)簡單的日期選擇插件
這篇文章主要介紹了利用JS實現(xiàn)簡單的日期選擇插件，文中實現(xiàn)兩種效果的日期選擇，一種是默認參數(shù)，點擊日期后直接選擇該日期，另一種是顯示按鈕來設置時間，有需要的朋友可以參考借鑒，下面來一起看看吧。
2017-01-01