แอตทริบิวต์ HTML 5 ตัวยึดติดตั้งอย่างสมบูรณ์แบบ

ความคิดเห็น: บทความนี้ส่วนใหญ่แนะนำแอตทริบิวต์ HTML 5 Placeholder เพื่อให้บริการอย่างสมบูรณ์แบบเป็นเช่น เพื่อนที่ต้องการมันสามารถอ้างถึงมันได้

$ (เอกสาร) .ready (function () {

if ($. browser.msie)

$ ("อินพุต: ข้อความ, อินพุต: รหัสผ่าน") แต่ละ (ฟังก์ชั่น () {

var $ placeholder = $ (this) .attr ("placeholder");

var $ width = $ (this) .css ("width");

var $ id = $ (นี่) .attr ("id");

var $ height = parseInt ($ (นี่) .css ("ความสูง")) + 6 + "px";

var $ fontsize = $ (this) .css ("Font-size");

var $ fontweight = $ (this) .css ("Font-Weight");

var $ lineHeight = $ ความสูง;

if ($ (นี่) .css ("line-height")! = "ปกติ") {

$ lineHeight = parseInt ($ (นี่) .css ("line-height")) + 6 + "px";

-

if ($ placeholder! = undefined) {

$ (นี่). หลังจาก ("<span class =/" placeholder ph_ " + $ id +"/"style =/" ความกว้าง: " + $ width +"; leight line: " + $ lineHeight +"; ความสูง: " + $ height +"; font-weight: " + $ fontweight +"; $ placeholder + "</span>");

-

$ (นี่). -bind ("keyup", function () {

ถ้า ($ (นี่) .val () == "") {

$ (นี่) .parent (). ค้นหา (". ph_" + $ id) .css ("แสดง", "inline-block");

-

อื่น {

$ (นี่) .parent (). ค้นหา (". ph_" + $ id) .css ("แสดง", "ไม่มี");

-

-

-

$ (". placeholder"). live ("คลิก", function () {

$ (นี่) .prev (). focus ();

-

-

หน้าโทร

<อินพุต type = "text" placeHolder = "ฉันแจ้งให้เนื้อหาเป็นปกติ" />

<อินพุต type = "text" placeholder = "ฉันกำลังแจ้งความกว้างและความสูงของเนื้อหา" />

<อินพุต type = "text" placeholder = "ฉันกำลังแจ้งเนื้อหาฉันมีสไตล์อื่น" />

<input type = "text" placeholder = "คุณสามารถลองใช้อื่น ๆ ได้" />

สไตล์

<style type = "text/css">

. สถานที่ {แสดง: inline-block; สี: สีเทา; แนวตั้ง-แนว: top; overflow: hidden;}

</style>