完整代码如下:
复制代码代码如下:
<! 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">
-
มาร์จิ้น: 0px; การตอบสนอง: 0px; ขนาดตัวอักษร: 12px;
-
ป้อนข้อมูล{
ความกว้าง: 100px; ความสูง: 20px; ชายแดน: 1px ของแข็ง #CCC;
-
</style>
</head>
<body>
<ภาษาสคริปต์ = "JavaScript">
เคล็ดลับฟังก์ชัน (id, str) {
var l = document.getElementById (id) .offsetleft+120;
var t = document.getElementById (id) .offSettop;
document.getElementById ("เคล็ดลับ"). innerhtml = "提示:"+str;
document.getElementById ("เคล็ดลับ"). style.left = l+"px";
document.getElementById ("เคล็ดลับ"). style.top = t+"px";
document.getElementById ("เคล็ดลับ"). style.display = "";
-
ฟังก์ชั่น Outtips () {
document.getElementById ("เคล็ดลับ"). style.display = 'ไม่มี';
-
</script>
<div id = "เคล็ดลับ" style = "ตำแหน่ง: Absolute; Border: 1px Solid #CCC; Padding: 0px 3px; สี:#f00; แสดง: ไม่มีความสูง: 20px; Line-Height: 20px; พื้นหลัง: #FCFCFC"
<br />
姓名: <อินพุต type = "text" id = "ชื่อผู้ใช้" onfocus = "เคล็ดลับ ('ชื่อผู้ใช้', '姓名长度最多 16 个字符')" onblur = "Outtips ()" />
<br />
密码: <อินพุต type = "รหัสผ่าน" id = "รหัสผ่าน" onfocus = "เคล็ดลับ ('รหัสผ่าน', '密码长度必须在 3-18 位之间')" onblur = "Outtips ()" />
</body>
</html>