创造惊艳的表单

使用 requestAutocomplete API简化结账手续

`requestAutocomplete`的设计初衷是为了帮助用户填写表单,如今,它在电子商务中最为广泛使用。电子商务中的弃购率高达97%。 想象一下,在一个超市里,97%的人得购物车里装满了他们想要的各种东西,但是最后随手一放,然后离开了超市。

关键要点

  • requestAutocomplete 能够最大程度上简化结账的过程,同时能够提升用户体验。
  • 如果网页中requestAutocomplete可用,它会隐藏结账表单并直接引导用户来到确认页面。
  • 确保输入标签包含合适的自动完成属性。

不像需要依靠特定支付手段的网站,requestAutocomplete需要从浏览器获得支付细目(比如姓名、收货地址以及信用卡信息),这些细目选择性地被浏览器保存,这和其他的自动完成表单非常相像。

requestAutocomplete流程

最为理想的体验方式是网站会显示requestAutocomplete的对话框而不是读取展示结帐表单的页面。如果一切顺利,用户将不会看到表单。你可以很容易地为已存在的表单添加requestAutoComplete,这不需要改变任何字段名字。简单地给每一个表单元素添加autocomplete属性,并添加合适的值,以及在表单元素上添加requestAutocomplete()函数。浏览器会自动完成剩下的事。 Request autocomplete flow

    var doRAC = document.getElementById("doRAC");
    doRAC.addEventListener("click", doRequestAutocomplete);

    form = document.getElementById("usrForm");
    form.addEventListener("autocompleteerror", requestAutocompleteError);
    form.addEventListener("autocomplete", requestAutocompleteCompleted);

    if (form.requestAutocomplete) {
      isRACSupported(true, "");
    } else {
      isRACSupported(false, "Please complete the form manually.");
    }
    
查看完整示例

form元素中的requestAutocomplete函数告诉浏览器应该填充表单。作为一个安全特性,这个函数必须通过用户手势,例如触摸或者鼠标单击来被唤醒。然后,弹出一个对话框询问用户许可以填充字段以及那些用户想要填充的详细内容。

    function requestAutocompleteCompleted(evt) {
      console.log("requestAutocomplete Completed", evt);
      form.classList.toggle("hidden", false);
    }

    function requestAutocompleteError(evt) {
      console.log("requestAutocomplete Error", evt);
      isRACSupported(false, "An error occured attempting to autocomplete the form.");
    }
    
查看完整示例

requestAutocomplete完成的时候,这个函数将会在表单成功填充成功时激活autocomplete事件。或者在表单不能够完成的情况下激活autocompleteerror事件。如果表单成功填充并且确认了你需要的,那就提交表单然后进行最终确认。

谨记

  • 如果你请求任何种类的私人信息或者信用卡数据,请确保网页处于SSL服务状态。否则,将会弹出对话框警告用户他们的信息可能会不安全。

除非另有说明,本网页的内容采用知识共享署名3.0许可和代码示例都基于Apache2.0许可。如需详细资讯,请参阅我们的网站政策

回到顶部