การโต้ตอบ

อุปกรณ์ที่มีหน้าจอขนาดเล็ก เช่น โทรศัพท์มือถือ มักจะมีหน้าจอสัมผัส อุปกรณ์หน้าจอขนาดใหญ่ เช่น แล็ปท็อปและคอมพิวเตอร์เดสก์ท็อปมักจะมาพร้อมกับฮาร์ดแวร์ เช่น เมาส์หรือแทร็กแพด คุณอาจคิดว่าหน้าจอขนาดเล็กควรใช้การสัมผัส ส่วนหน้าจอขนาดใหญ่ควรใช้เคอร์เซอร์

แต่ความเป็นจริงนั้นซับซ้อนกว่า แล็ปท็อปบางรุ่นมีความสามารถในการใช้หน้าจอสัมผัส ผู้ใช้โต้ตอบกับหน้าจอสัมผัสหรือแทร็กแพด หรือทั้ง 2 อย่างก็ได้ ในทำนองเดียวกัน คุณสามารถใช้แป้นพิมพ์หรือเมาส์ภายนอกกับอุปกรณ์หน้าจอสัมผัสอย่างแท็บเล็ตได้

ใช้ฟีเจอร์สื่อใน CSS แทนการพยายามอนุมานกลไกการป้อนข้อมูลจากขนาดหน้าจอ

ตัวชี้

คุณทดสอบค่าที่เป็นไปได้ 3 ค่าได้ด้วยฟีเจอร์สื่อ pointer ได้แก่ none, coarse และ fine

หากเบราว์เซอร์รายงานค่า pointer เป็น none แสดงว่าผู้ใช้อาจใช้แป้นพิมพ์เพื่อโต้ตอบกับเว็บไซต์

หากเบราว์เซอร์รายงานค่า pointer เป็น coarse แสดงว่ากลไกอินพุตหลักไม่แม่นยำมากนัก นิ้วบนหน้าจอสัมผัสเป็นตัวชี้แบบหยาบ

หากเบราว์เซอร์รายงานค่า pointer เป็น fine หมายความว่ากลไกอินพุตหลักสามารถควบคุมแบบละเอียดได้ เมาส์หรือสไตลัสเป็นเคอร์เซอร์ที่ละเอียด

คุณสามารถปรับขนาดขององค์ประกอบอินเทอร์เฟซให้เหมาะกับค่า pointer ได้ ลองไปที่เว็บไซต์นี้ในอุปกรณ์ประเภทต่างๆ เพื่อดูว่าอินเทอร์เฟซปรับเปลี่ยนอย่างไร

ในตัวอย่างนี้ ปุ่มมีขนาดใหญ่ขึ้นสำหรับเคอร์เซอร์แบบหยาบ

button {
  padding: 0.5em 1em;
}
@media (pointer: coarse) {
  button {
    padding: 1em 2em;
  }
}

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

ไม่ควรทำ

@media (pointer: fine) {
  button {
    padding: 0.25em 0.5em;
  }
}

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

ตัวชี้ใดก็ได้

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

any-pointer แตกต่างจากฟีเจอร์สื่อ pointer ตรงที่จะรายงานหากอุปกรณ์ชี้ใดๆ ผ่านการทดสอบ

ค่า any-pointer ของ none หมายความว่าไม่มีอุปกรณ์ชี้อยู่

ค่า any-pointer เป็น coarse หมายความว่าอุปกรณ์ชี้ตำแหน่งอย่างน้อย 1 เครื่องมีความแม่นยำไม่มากนัก แต่นั่นอาจไม่ใช่กลไกการป้อนข้อมูลหลัก

ค่า any-pointer เท่ากับ fine หมายความว่าอุปกรณ์ชี้อย่างน้อย 1 เครื่องสามารถควบคุมแบบละเอียดได้ แต่อีกครั้ง การดำเนินการนี้อาจไม่ใช่กลไกการป้อนข้อมูลหลัก

เนื่องจากข้อความค้นหาสื่อ any-pointer จะรายงานผลลัพธ์เป็นบวกหากกลไกอินพุตใดหนึ่งผ่านการทดสอบ เบราว์เซอร์จึงอาจรายงานผลลัพธ์สำหรับ any-pointer: fine และรายงานผลลัพธ์สำหรับ any-pointer: coarse ด้วย ในกรณีนี้ ลำดับของคำค้นหาสื่อจะมีผล โดยรายการล่าสุดจะมีความสําคัญมากกว่า

ในตัวอย่างนี้ หากอุปกรณ์มีทั้งกลไกการป้อนข้อมูลแบบละเอียดและแบบหยาบ ระบบจะใช้รูปแบบแบบหยาบ

@media (any-pointer: fine) {
  button {
    padding: 0.5em 1em;
  }
}
@media (any-pointer: coarse) {
  button {
    padding: 1em 2em;
  }
}

วางเมาส์

ฟีเจอร์สื่อ hover จะรายงานว่ากลไกอินพุตหลักวางเมาส์เหนือองค์ประกอบได้หรือไม่ ซึ่งมักจะหมายความว่ามีเคอร์เซอร์บางประเภทบนหน้าจอที่ควบคุมโดยเมาส์หรือแทร็กแพด

ฟีเจอร์สื่อ hover เป็นไบนารี ซึ่งแตกต่างจากฟีเจอร์สื่อ pointer ที่แยกความแตกต่างระหว่างเคอร์เซอร์แบบละเอียดและแบบหยาบ หากอุปกรณ์อินพุตหลักสามารถวางเมาส์เหนือองค์ประกอบได้ ก็จะรายงานค่าเป็น hover ไม่เช่นนั้น ค่าจะเป็น none

ในตัวอย่างนี้ ไอคอนเสริมบางรายการจะปรากฏขึ้นเมื่อวางเมาส์เหนือ แต่เฉพาะในกรณีที่อุปกรณ์อินพุตหลักสามารถวางเมาส์เหนือองค์ประกอบได้

button .extra {
  visibility: visible;
}
@media (hover: hover) {
  button .extra {
    visibility: hidden;
  }
  button:hover .extra {
    visibility: visible;
  }
}

หากใช้เมาส์วางเหนือปุ่มดังกล่าว ไอคอนจะปรากฏขึ้น แต่หากใช้แป้นพิมพ์เพื่อกด Tab ไปยังปุ่ม ไอคอนจะยังคงมองไม่เห็น เมื่อใช้แป้นพิมพ์ คุณจะโฟกัสแทนการวางเมาส์เหนือ อุปกรณ์เดสก์ท็อปที่มีเมาส์ต่ออยู่จะรายงานว่ากลไกอินพุตหลักสามารถวางเมาส์เหนือได้ ซึ่งถูกต้อง แต่ผู้ที่ใช้แป้นพิมพ์ขณะที่เสียบเมาส์ไว้จะไม่สามารถใช้รูปแบบ :hover คุณจึงควรใช้ทั้งสไตล์ :hover และ :focus เพื่อครอบคลุมการโต้ตอบทั้ง 2 แบบ

button .extra {
  visibility: visible;
}
@media (hover: hover) {
  button .extra {
    visibility: hidden;
  }
  button:is(:hover, :focus) .extra {
    visibility: visible;
  }
}

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

เมื่อนำเมาส์มาวางเหนือ

การค้นหาสื่อ hover จะรายงานเฉพาะกลไกอินพุตหลักเท่านั้น อุปกรณ์บางเครื่องมีกลไกอินพุตหลายอย่าง เช่น หน้าจอสัมผัส เมาส์ แป้นพิมพ์ ทัชแพด

เช่นเดียวกับที่ any-pointer รายงานเกี่ยวกับกลไกอินพุตใดๆ any-hover จะถือเป็นจริงหากกลไกอินพุตใดๆ ที่มีสามารถวางเมาส์เหนือองค์ประกอบได้

หากตัดสินใจที่จะเปลี่ยนตรรกะในตัวอย่างก่อนหน้านี้ คุณอาจทำให้สไตล์โฮเวอร์เป็นค่าเริ่มต้น แล้วนำออกหาก any-hover มีค่าเป็น none

button .extra {
  visibility: hidden;
}
button:hover .extra,
button:focus .extra {
  visibility: visible;
}
@media (any-hover: none) {
  button .extra {
    visibility: visible;
  }
}

ในอุปกรณ์ที่ไม่มีกลไกอินพุตที่วางเมาส์เหนือได้ ไอคอนพิเศษจะปรากฏอยู่เสมอ

แป้นพิมพ์เสมือน

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

ประเภทอินพุต

แป้นพิมพ์เสมือนสามารถปรับแต่งให้ตรงกับข้อมูลที่คาดไว้ได้ ซึ่งแตกต่างจากแป้นพิมพ์จริง หากคุณให้ข้อมูลเกี่ยวกับอินพุตที่คาดไว้ อุปกรณ์จะแสดงแป้นพิมพ์เสมือนจริงที่เหมาะสมที่สุด

ประเภทอินพุต HTML5 เป็นวิธีที่ยอดเยี่ยมในการอธิบายองค์ประกอบ input แอตทริบิวต์ type ยอมรับค่าต่างๆ เช่น email, number, tel, url และอื่นๆ

  <label for="email">Email</label>
  <input type="email" id="email">

  <label for="number">Number</label>
  <input type="number" id="number">

  <label for="tel">Tel</label>
  <input type="tel" id="tel">

  <label for="url">URL</label>
  <input type="url" id="url">

โหมดการป้อนข้อมูล

Browser Support

• 66
• 79
• 95
• 12.1

Source

แอตทริบิวต์ inputmode ช่วยให้คุณควบคุมแป้นพิมพ์เสมือนได้แบบละเอียด ตัวอย่างเช่น เมื่อมี input type รายการที่มีค่าเป็น number คุณสามารถใช้แอตทริบิวต์ inputmode เพื่อแยกความแตกต่างระหว่างจำนวนเต็มกับทศนิยม

หากต้องการค่าจำนวนเต็ม เช่น อายุของบุคคล ให้ใช้ inputmode="numeric"

<label for="age">Age</label>
<input type="number" id="age" inputmode="numeric">

หากต้องการตัวเลขที่มีทศนิยม เช่น ราคา ให้ใช้ inputmode="decimal"

<label for="price">Price</label>
<input type="number" id="price" inputmode="decimal">

เติมข้อความอัตโนมัติ

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

<label for="name">Name</label>
<input type="text" id="name" autocomplete="name">

<label for="country">Country</label>
<input type="text" id="country" autocomplete="country">

<label for="email">Email</label>
<input type="email" id="email" autocomplete="email">

แอตทริบิวต์ HTML เหล่านี้ ได้แก่ type, inputmode และ autocomplete เป็นส่วนเสริมเล็กๆ ในช่องแบบฟอร์ม แต่สามารถสร้างความแตกต่างอย่างมากต่อประสบการณ์ของผู้ใช้ การคาดการณ์และตอบสนองต่อความสามารถของอุปกรณ์ของผู้ใช้เป็นการให้อำนาจแก่ผู้ใช้ หากต้องการทราบข้อมูลเชิงลึกเพิ่มเติม เรามีหลักสูตรที่จะช่วยคุณเรียนรู้เกี่ยวกับแบบฟอร์มโดยเฉพาะ

หัวข้อถัดไปในหลักสูตรนี้เราจะมาศึกษารูปแบบอินเทอร์เฟซที่พบบ่อย

ทดสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับการโต้ตอบ

คุณควรใช้ฟีเจอร์ใดแทนที่จะพยายามอนุมานประเภทอินพุตของผู้ใช้จากขนาดหน้าจอ

ฟีเจอร์สื่อ CSS

เช่น @media (pointer: coarse) หรือ @media (-any-pointer: coarse)

ถามผู้ใช้ด้วย prompt() ของ JavaScript

ไม่เหมาะที่จะถามโดยตรง

ประเภทสื่อ CSS handheld

เราเลิกใช้งานคำสั่งนี้ใน Media Queries 4 แล้ว

@media (pointer) กับ @media (any-pointer) แตกต่างกันอย่างไร

ซึ่งรวมถึงสิ่งต่างๆ เช่น นิ้วของคุณ

ประเภทอินพุตของเคอร์เซอร์มีฟีเจอร์การสัมผัสอยู่แล้ว

โดยที่เคอร์เซอร์จะไม่รวมสิ่งต่างๆ เช่น เมาส์

โดยพอยน์เตอร์จะรวมเมาส์เป็นอุปกรณ์อินพุต

เคอร์เซอร์ใดๆ จะรายงานเป็น "จริง" เมื่ออินพุตเพิ่มเติมที่ไม่ใช่อินพุตหลัก เช่น สไตลัส ผ่านการทดสอบ

any-pointer จะค้นหาข้อมูลการป้อนข้อมูลของอุปกรณ์ทุกประเภทเพื่อหารายการที่ตรงกัน

ประเภทอินพุตใดแสดงแป้นพิมพ์เสมือนที่เหมาะสมกับผู้ใช้มากกว่า

type="url"

แป้นพิมพ์จะมีปุ่มที่รองรับการพิมพ์ URL

type="tel"

แป้นพิมพ์จะมีปุ่มที่รองรับการพิมพ์หมายเลขโทรศัพท์

type="number"

แป้นพิมพ์จะมีปุ่มที่รองรับการพิมพ์เฉพาะตัวเลข

type="email"

แป้นพิมพ์จะมีปุ่มที่รองรับการพิมพ์อีเมล