รหัสตัวอย่างที่เปลี่ยนรูปแบบการเปลี่ยนแปลงเมื่อกล่องข้อความได้รับโฟกัส

สรุป: นักออกแบบหลายคนที่ให้ความสำคัญกับประสบการณ์ผู้ใช้ต้องการเพิ่มจุดเน้นของการได้รับโฟกัสหรือเอฟเฟกต์การสลับสไตล์เมื่อเมาส์ลอยอยู่ ในความเป็นจริงมันง่ายมาก บทความนี้แนะนำวิธีเปลี่ยนสไตล์เมื่อได้รับโฟกัส

นักออกแบบหลายคนที่ให้ความสำคัญกับประสบการณ์ผู้ใช้หวังว่าจะเพิ่มจุดสนใจของโฟกัสหรือเอฟเฟกต์การสลับสไตล์เมื่อพวกเขาได้รับโฟกัสหรือเมาส์โฮเวอร์ ในความเป็นจริงมันง่ายมาก บทความนี้แนะนำวิธีเปลี่ยนสไตล์เมื่อได้รับโฟกัส

คัดลอกรหัสรหัสดังนี้:

ฟังก์ชั่นโฟกัส (FocusClass, NormalClass) {

varings = document.getElementsByTagname ("อินพุต");

สำหรับ (var i = 0; i <elements.length; i ++) {

if (องค์ประกอบ [i] .type! = "ปุ่ม" && องค์ประกอบ [i] .type! = "ส่ง" && องค์ประกอบ [i] .type! = "รีเซ็ต") {

// if_f (องค์ประกอบ [i] .type == "text") {{

องค์ประกอบ [i] .onfocus = function () {this.className = focusclass;};

องค์ประกอบ [i] .onblur = function () {this.className = NormalClass || '';};

-

-

-

window.onload = function () {

FocusInput ('Focusinput', 'NormalInput');

-

คัดลอกรหัสรหัสดังนี้:

<style type = "text/css">

.normalInput {เส้นขอบ: 1px solid #ccc;}

.FocusInput {เส้นขอบ: 1px solid #ffd42c;}

</style>