快捷導(dǎo)航

html文本框提示效果的示例代碼

更新時(shí)間：2014年06月28日 22:56:30 投稿：mdxy-dxy

在html文本框中顯示提示效果，以方便用戶的輸入，比如在輸入姓名時(shí)，會(huì)自動(dòng)提示姓名長(zhǎng)度最多16個(gè)字符，是不是很酷哦?？靵?lái)看看吧

完整代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

  <title>html文本框提示效果</title>

  <style type="text/css">

  *{

  margin:0px;padding:0px;font-size:12px;

  }

    input{

      width:100px;height:20px;border:1px solid #ccc;

    }

  </style>

</head>

<body>

<script language="javascript">

function tips(id,str){

var l=document.getElementById(id).offsetLeft+120;

var t=document.getElementById(id).offsetTop;

document.getElementById("tips").innerHTML="提示："+str;

document.getElementById("tips").style.left=l+"px";

document.getElementById("tips").style.top=t+"px";

document.getElementById("tips").style.display="";

}

function outtips(){

    document.getElementById("tips").style.display='none';

}

</script>

<div id="tips" style="position:absolute;border:1px solid #ccc;padding:0px 3px;color:#f00;display:none;height:20px;line-height:20px;background:#fcfcfc"></div>

<br />

姓名：<input type="text" id="username" onfocus="tips('username','姓名長(zhǎng)度最多16個(gè)字符')" onblur="outtips()" />

<br />

密碼：<input type="password" id="password" onfocus="tips('password','密碼長(zhǎng)度必須在3-18位之間')" onblur="outtips()" />

</body>

</html>

您可能感興趣的文章:

相關(guān)文章

JavaScript中運(yùn)算符與數(shù)組擴(kuò)展詳細(xì)講解
這篇文章主要介紹了JavaScript中運(yùn)算符與數(shù)組擴(kuò)展方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧
2022-11-11
JavaScript使用高階生成器進(jìn)行過(guò)濾以生成素?cái)?shù)
生成器大家都知道是怎么一回事,但是高階生成器又是什么東西呢,下面小編就來(lái)為大家簡(jiǎn)單介紹一下如何使用高階生成器進(jìn)行過(guò)濾以生成素?cái)?shù)吧
2024-02-02
使用postMesssage()實(shí)現(xiàn)iframe跨域頁(yè)面間的信息傳遞
這篇文章主要介紹了使用postMesssage()實(shí)現(xiàn)iframe跨域頁(yè)面間的信息傳遞的相關(guān)資料,需要的朋友可以參考下
2016-03-03
淺談javascript中字符串String與數(shù)組Array
這篇文章主要介紹了淺談javascript中字符串String與數(shù)組Array,需要的朋友可以參考下
2014-12-12
[JS]實(shí)現(xiàn)動(dòng)態(tài)增加框架！未完成
[JS]實(shí)現(xiàn)動(dòng)態(tài)增加框架！未完成...
2007-03-03
JavaScript的一些小技巧分享
這篇文章主要介紹了JavaScript的一些小技巧分享，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下
2021-01-01
小程序云開(kāi)發(fā)實(shí)現(xiàn)數(shù)據(jù)庫(kù)異步操作同步化
這篇文章主要為大家詳細(xì)介紹了小程序云開(kāi)發(fā)實(shí)現(xiàn)數(shù)據(jù)庫(kù)異步操作同步化，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-05-05
動(dòng)態(tài)加載圖片路徑保持JavaScript控件的相對(duì)獨(dú)立性
根據(jù)新界面的要求，需要一部分圖片來(lái)增強(qiáng)日期控件的美觀性?？紤]到既要實(shí)現(xiàn)加載圖表的目標(biāo)，又要保持控件的獨(dú)立性以便將來(lái)的移植。
2010-09-09
關(guān)于flash遮蓋div浮動(dòng)層的解決方法
關(guān)于flash遮蓋div浮動(dòng)層
2010-07-07
java實(shí)現(xiàn)單鏈表增刪改查的實(shí)例代碼詳解
在本篇文章里小編給大家整理了關(guān)于java實(shí)現(xiàn)單鏈表增刪改查的實(shí)例內(nèi)容，需要的朋友們可以參考下。
2019-08-08