ป้อนข้อความอัตโนมัติใน "เขียน"

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

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

คุณสามารถใช้การป้อนข้อความอัตโนมัติใน Compose ได้ด้วยโค้ดเพียงไม่กี่บรรทัด ฟีเจอร์นี้มีประโยชน์ต่อผู้ใช้ดังนี้

กรอกข้อมูลเข้าสู่ระบบ

การป้อนข้อความอัตโนมัติช่วยให้ผู้ใช้ป้อนข้อมูลเข้าสู่ระบบได้ด้วยวิธีต่อไปนี้

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

บันทึกข้อมูลประจำตัว

ผู้ใช้บันทึกข้อมูลเข้าสู่ระบบผ่านการป้อนข้อความอัตโนมัติได้ด้วยวิธีต่อไปนี้

• ระบบจะทริกเกอร์กล่องโต้ตอบการบันทึก ซึ่งจะแจ้งให้ผู้ใช้บันทึกข้อมูล เมื่อป้อนข้อมูลใหม่หรืออัปเดตข้อมูลลงในช่องที่เปิดใช้การป้อนข้อความอัตโนมัติ คุณบันทึกได้ 2 วิธีดังนี้
  • อย่างชัดเจนโดยการส่งข้อมูล (เช่น ผ่านการคลิกปุ่ม)
  • โดยนัย เมื่อผู้ใช้ออกจากหน้าเว็บ
• ระบบอาจแนะนำรหัสผ่านที่รัดกุม แก่ผู้ใช้เมื่อตั้งค่าฟิลด์เป็น ContentType.NewPassword ทั้งนี้ขึ้นอยู่กับผู้ให้บริการข้อมูลเข้าสู่ระบบ

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

ค่าป้อนอัตโนมัติ

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

เพิ่มการป้อนข้อความอัตโนมัติลงในช่องข้อความโดยใช้ประเภทเนื้อหา

หากต้องการระบุว่า TextField เปิดใช้การป้อนข้อความอัตโนมัติ ให้ตั้งค่า ContentType semantics ด้วยประเภทที่ฟิลด์ยอมรับได้ ซึ่งจะระบุให้ บริการป้อนข้อความอัตโนมัติทราบว่าข้อมูลผู้ใช้ประเภทใดที่อาจเกี่ยวข้องกับ ช่องนี้ ใช้ ContentType.Username เพื่อตั้งค่า TextField ที่ผู้ใช้สามารถกรอก ชื่อผู้ใช้ของตนเองได้

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

ช่องข้อความตามมูลค่า

TextField(
    value = textFieldValue.value,
    onValueChange = {textFieldValue.value = it},
    modifier = Modifier.semantics { contentType = ContentType.Username }
)
AutofillSnippets.kt

ช่องข้อความตามสถานะ

TextField(
    state = rememberTextFieldState(),
    modifier = Modifier.semantics { contentType = ContentType.Username }
)
AutofillSnippets.kt

เพิ่มช่องป้อนข้อความอัตโนมัติที่มีหลายประเภท

ในบางกรณี คุณอาจต้องการให้ TextField มีContentTypeมากกว่า 1 รายการ เช่น ช่องเข้าสู่ระบบอาจยอมรับทั้งอีเมลหรือ ชื่อผู้ใช้ คุณเพิ่มเนื้อหาหลายประเภทลงใน TextField ได้โดยใช้ตัวดำเนินการ +

ดูข้อมูลทุกประเภทที่บันทึกได้ด้วยการป้อนข้อความอัตโนมัติได้ที่ContentType ข้อมูลอ้างอิง

ช่องข้อความตามมูลค่า

TextField(
    value = textFieldValue.value,
    onValueChange = { textFieldValue.value = it },
    modifier = Modifier.semantics {
        contentType = ContentType.Username + ContentType.EmailAddress
    }
)
AutofillSnippets.kt

ช่องข้อความตามสถานะ

TextField(
    state = rememberTextFieldState(),
    modifier = Modifier.semantics {
        contentType = ContentType.Username + ContentType.EmailAddress
    }
)
AutofillSnippets.kt

ป้อนข้อมูลด้วยการป้อนข้อความอัตโนมัติ

เมื่อเพิ่ม ContentType ใน TextField คุณไม่จำเป็นต้องดำเนินการใดๆ เพิ่มเติมเพื่อให้ผู้ใช้กรอกข้อมูลเข้าสู่ระบบได้

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

ประหยัดอินเทอร์เน็ตมือถือด้วยการป้อนข้อความอัตโนมัติผ่านการนำทาง

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

บันทึกข้อมูลอย่างชัดเจนด้วยการป้อนข้อความอัตโนมัติ

หากต้องการบันทึกข้อมูลเข้าสู่ระบบใหม่อย่างชัดเจนผ่านช่องข้อความด้วยการป้อนข้อความอัตโนมัติ ผู้จัดการการป้อนข้อความอัตโนมัติควรส่ง (หรือยกเลิก) บริบทการป้อนข้อความอัตโนมัติ จากนั้น เครื่องมือจัดการการป้อนข้อความอัตโนมัติในเครื่องจะสื่อสารกับเฟรมเวิร์กการป้อนข้อความอัตโนมัติเมื่อ จำเป็น หากต้องการนำข้อมูลเข้าสู่ระบบที่ผู้ใช้ป้อนออก ให้เรียกใช้ AutofillManager.cancel เพื่อลบข้อมูลที่รอดำเนินการโดยไม่ต้องบันทึก

ข้อมูลโค้ดต่อไปนี้แสดงวิธีบันทึกข้อมูลด้วยการป้อนข้อความอัตโนมัติอย่างชัดเจนโดยใช้ปุ่ม

1. สร้างตัวแปรภายในเพื่อเก็บ Autofill Manager ซึ่งเรียกข้อมูลได้ ด้วยวิธีต่อไปนี้

   val autofillManager = LocalAutofillManager.current
   AutofillSnippets.kt

2. ในTextField(s) ให้เพิ่มประเภทเนื้อหาที่เลือกผ่าน Modifier.semantics

   • ช่องข้อความตามมูลค่ามีดังนี้

     val autofillManager = LocalAutofillManager.current
     
     Column {
         TextField(
             value = textFieldValue.value,
             onValueChange = { textFieldValue.value = it },
             modifier = Modifier.semantics { contentType = ContentType.NewUsername }
         )
     
         Spacer(modifier = Modifier.height(16.dp))
     
         TextField(
             value = textFieldValue.value,
             onValueChange = { textFieldValue.value = it },
             modifier = Modifier.semantics { contentType = ContentType.NewPassword }
         )
     }
     AutofillSnippets.kt

   • เมื่อใช้ช่องข้อความตามสถานะ

     val autofillManager = LocalAutofillManager.current
     
     Column {
         TextField(
             state = rememberTextFieldState(),
             modifier = Modifier.semantics { contentType = ContentType.NewUsername }
         )
     
         Spacer(modifier = Modifier.height(16.dp))
     
         TextField(
             state = rememberTextFieldState(),
             modifier = Modifier.semantics { contentType = ContentType.NewPassword }
         )
     }
     AutofillSnippets.kt

3. ส่งบริบทการป้อนข้อความอัตโนมัติตามต้องการผ่านการคลิกปุ่ม

   • ช่องข้อความตามมูลค่ามีดังนี้

     val autofillManager = LocalAutofillManager.current
     
     Column {
         TextField(
             value = textFieldValue.value,
             onValueChange = { textFieldValue.value = it },
             modifier = Modifier.semantics { contentType = ContentType.NewUsername },
         )
     
         Spacer(modifier = Modifier.height(16.dp))
     
         TextField(
             value = textFieldValue.value,
             onValueChange = { textFieldValue.value = it },
             modifier = Modifier.semantics { contentType = ContentType.NewPassword },
         )
     
         // Submit button
         Button(onClick = { autofillManager?.commit() }) { Text("Reset credentials") }
     }
     AutofillSnippets.kt

   • เมื่อใช้ช่องข้อความตามสถานะ

     val autofillManager = LocalAutofillManager.current
     
     Column {
         TextField(
             state = rememberTextFieldState(),
             modifier = Modifier.semantics { contentType = ContentType.NewUsername },
         )
     
         Spacer(modifier = Modifier.height(16.dp))
     
         TextField(
             state = rememberTextFieldState(),
             modifier = Modifier.semantics { contentType = ContentType.NewPassword },
         )
     
         // Submit button
         Button(onClick = { autofillManager?.commit() }) { Text("Reset credentials") }
     }
     AutofillSnippets.kt

ระบบจะเรียกใช้ Commit ทุกครั้งที่ผู้ใช้ออกจากหน้าจอ หากปุ่มส่งลิงก์กับการนำทาง ก็ไม่จำเป็นต้องเรียกใช้ Commit หากยังต้องการให้การคลิกส่งเรียกกล่องโต้ตอบการบันทึก ให้เพิ่ม Commit ที่นี่

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

บันทึกข้อมูลด้วยการป้อนข้อความอัตโนมัติผ่านฟีเจอร์แนะนำรหัสผ่านที่รัดกุม

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

การแก้ปัญหา

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

ปรับแต่งการป้อนข้อความอัตโนมัติเพิ่มเติม

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

หากต้องการปรับแต่งสีไฮไลต์นี้ ให้ใช้ CompositionLocal แล้วระบุสีที่ต้องการ สีไฮไลต์การป้อนข้อความอัตโนมัติเริ่มต้นกำหนดเป็น Color(0x4dffeb3b)

ช่องข้อความตามมูลค่า

val customHighlightColor = Color.Red

CompositionLocalProvider(LocalAutofillHighlightColor provides customHighlightColor) {
    TextField(
        value = textFieldValue.value,
        onValueChange = { textFieldValue.value = it },
        modifier = Modifier.semantics { contentType = ContentType.Username }
    )
}
AutofillSnippets.kt

ช่องข้อความตามสถานะ

val customHighlightColor = Color.Red

CompositionLocalProvider(LocalAutofillHighlightColor provides customHighlightColor) {
    TextField(
        state = rememberTextFieldState(),
        modifier = Modifier.semantics { contentType = ContentType.Username }
    )
}
AutofillSnippets.kt