เมื่อเร็ว ๆ นี้เราจำเป็นต้องให้ HTML5 WebApp ใช้ฟังก์ชั่นการคัดลอกบนหน้า: ผู้ใช้สามารถเลือกข้อความและปรากฏเมนูคัดลอกระบบในข้อความกดยาวและผู้ใช้สามารถคลิกเพื่อคัดลอกสำหรับการดำเนินการคัดลอกแล้ววาง มันไปที่ AppStore ค้นหาแอปพลิเคชันที่เกี่ยวข้อง เหตุผลที่ไม่ได้ใช้เพื่อข้ามไปยังแอปพลิเคชันที่สอดคล้องกันในรูปแบบของลิงก์โดยตรงคือการเพิ่มน้ำหนักของแอพที่ได้รับการส่งเสริมผ่านการค้นหาคำหลักอินพุตที่ใช้งานของผู้ใช้ ดังนั้นฟังก์ชั่นสำเนานี้จึงจำเป็นสำหรับประสบการณ์ผู้ใช้
ลองใช้วิธีปฏิบัติบางอย่างความเข้ากันได้บนแพลตฟอร์ม Android/iOS นั้นไม่ค่อยดีนัก ในเบราว์เซอร์ WeChat มันเป็นเรื่องง่ายที่จะบรรลุข้อความยาวเพื่อกระตุ้นเมนูระบบ แต่ประสิทธิภาพของเบราว์เซอร์อื่นไม่สอดคล้องกัน รวมถึงอินพุตโฟกัสแบบจำลองการเลือก JavaScript พยายามเปิดใช้งานเมนูระบบด้วยแท็ก วิธีการเหล่านี้มีข้อบกพร่องที่เข้ากันได้
1) แม้ว่าแท็กที่มีแอตทริบิวต์ HREF จะใช้บนเบราว์เซอร์ UC และเบราว์เซอร์ Baidu แต่การกดข้อความยาวจะปรากฏขึ้นฟรีคัดลอก/เลือกเมนูข้อความ โทรศัพท์ Android บางรุ่นในโทรศัพท์ Android บางรุ่นเบราว์เซอร์ระบบและ iPhone ถือเป็นลิงค์บริสุทธิ์มีเพียงลิงก์สำเนาจะปรากฏขึ้นโดยไม่ต้องคัดลอกเมนูข้อความ ยิ่งไปกว่านั้นแม้ว่าเบราว์เซอร์จำนวนน้อยจะถือว่าเป็นไปได้ แต่ก็จะมีขั้นตอนในการใช้งานผู้ใช้เพิ่มขึ้นเพิ่มความซับซ้อน ดังนั้นแผนนี้จึงไม่เป็นที่ต้องการ
2) ด้วยความช่วยเหลือของวิธีการเลือกและช่วงความเข้ากันได้ของเบราว์เซอร์ที่แตกต่างกันจะต้องนำมาพิจารณา
ฟังก์ชั่น selectText (องค์ประกอบ) {var doc = เอกสาร, text = docGetElementById (องค์ประกอบ), ช่วง, การเลือก; การเลือก = WindogetSelection (); } else {Alert (ไม่มี);}}น่าเสียดายที่ข้อความทั้งหมดไม่สามารถเลือกได้โดยคลิกหรือกดสูงเป็นระยะเวลานานบน iPhone Safari (เนื่องจากยังรองรับ window.getSelection ทำไมข้อความไม่สามารถเลือกได้ตามค่าเริ่มต้นหลังจากการทำงานของเบราว์เซอร์ Safari ). ดังนั้นจึงมีข้อบกพร่องในวิธีนี้ เลือกวิธีการของพื้นที่ข้อความภาษาจีนอย่างแข็งขันและแนบในภายหลัง
3) ผู้ใช้ iPhone อาจรู้ว่าการกดพื้นที่ว่างรอบ ๆ ข้อความในเขตเลือกตั้งข้อความที่แน่นอน Safari จะเลือกข้อความในเขตเลือกตั้งโดยอัตโนมัติ (ข้อความเป้าหมายจะต้องวางไว้ในคอนเทนเนอร์ Div Div อิสระ) ขึ้นอยู่กับคุณสมบัตินี้ให้ใช้ Margin CSS เพื่อแก้ไข หลังจากการทดสอบโดยไม่คำนึงถึงแพลตฟอร์ม Android และ iOS เบราว์เซอร์ระบบที่มาพร้อมกับโทรศัพท์มือถือนั้นเข้ากันได้ สำหรับผลิตภัณฑ์มือถือจากผู้ผลิตรายอื่นเช่นเบราว์เซอร์ UC และเบราว์เซอร์ Baidu เนื่องจากมีกลไกที่แตกต่างกันพวกเขาสามารถใช้ฟังก์ชั่นการจำลองแบบฟรีโดยเมนูเบราว์เซอร์เหล่านี้
ดังนั้นฉันจึงรวมวิธีที่สองและสามโดยใช้เหตุการณ์ Taphold ใน JQuery Mobile เพื่อจำลองสำเนาของระบบโทรศัพท์มือถือสำหรับการดำเนินการ LongTap มาพูดถึงข้อบกพร่องที่เข้ากันได้ของ Taphold จะไม่ถูกแนบไปกับการแก้ปัญหาในรายละเอียดที่นี่
นี่คือวิธีแก้ปัญหาของฉัน รหัสเฉพาะมีดังนี้:
รหัส HTML:
<div class = ข้อกำหนด para> <div class = เคล็ดลับเคล็ดลับ t> 1 คุณต้องดาวน์โหลดเป็นครั้งแรกก่อนที่จะมีผล <br/> 2. ไม่สามารถดาวน์โหลดได้จากการจัดอันดับ </div> <div class = cparea> <div class = kwd id = kwd> <span> หลักของสามอาณาจักร Yanyi การเพิ่มประสิทธิภาพโทรศัพท์มือถือ </span> </div> </div> <div class = cparea> <span class = kdes> < b> ★ </b> ยาวกดเฟรมประ, สำเนาคำหลัก </span> </div> <a href = https: // iTunesappleCom/cn/data-Role = class class = ดาวน์โหลด> ไปที่ appstore เพื่อค้นหาและ ดาวน์โหลด </a> </div>
รหัส JavaScript:
<script type = text/javascript> $ (#kwd) bind (taphold, function () {// ไม่รองรับ iPhone/Itouch/iPad Safari var doc = เอกสาร, text = docGetElementById (kwd), ช่วง, การเลือก; DocbodyCreatetexTrange) {Range = DocumentBodyCreatetexTrange (); );รหัส CSS คีย์:
CPAREA {Text-Align: Center; 1875EM; #212121;หมายเหตุ: มาร์จิ้นที่นี่: 2EM คือการทำงานที่ยาวนานของการกดเบราว์เซอร์ Safari ที่ยาวนาน 2EM นี้ ในท้ายที่สุดไม่เพียง แต่มีความสอดคล้องทางสายตากับการวาดการออกแบบ แต่ยังได้รับเมนูระบบกระตุ้นที่ยาวนาน
ในที่สุดเพิ่มวิธีที่สมบูรณ์ในการสนับสนุน Safari:
$ (#kwd). -bind (taphold, function () {var doc = documen, text = docgetElementById (kwd), ช่วง, การเลือก; ถ้า (docbodyCreatexrange) {// ieran ();} ถ้า (WindogetSelection) {// ff CH SF SELECTION = WindowGetSelection (); ; ไม่ รองรับการเลือก TextContent (0, TextFirstChildTextContentLength, 0, TextFirstChild); }}) ฟังก์ชั่น es [เด็ก]);ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้