จะปิดการใช้งานการเชื่อมโยงหมายเลขโทรศัพท์ใน Mobile Safari ได้อย่างไร

Safari บน iPhone จะสร้างลิงก์สำหรับสตริงตัวเลขที่ปรากฏกับหมายเลขโทรศัพท์โดยอัตโนมัติ ฉันกำลังเขียนเว็บเพจที่มีที่อยู่ IP และ Safari กำลังเปลี่ยนให้เป็นลิงก์หมายเลขโทรศัพท์ เป็นไปได้หรือไม่ที่จะปิดการใช้งานพฤติกรรมนี้สำหรับทั้งหน้าหรือองค์ประกอบบนหน้า?

สิ่งนี้น่าจะเป็นสิ่งที่ถูกต้องตามข้อมูลอ้างอิงของSafari HTML :

<meta name="format-detection" content="telephone=no">

หากคุณปิดใช้งานสิ่งนี้ แต่ยังต้องการลิงค์โทรศัพท์คุณยังสามารถใช้รูปแบบ URI "tel" ได้

นี่คือหน้าที่เกี่ยวข้องที่ Library Developer ของ Apple

หากต้องการปิดใช้งานการแยกวิเคราะห์ลักษณะโทรศัพท์สำหรับองค์ประกอบเฉพาะ CSS นี้ดูเหมือนจะใช้เคล็ดลับ:

.element { pointer-events: none; }
.element > a { text-decoration:none; color:inherit; }

กฎข้อแรกปิดการใช้งานการคลิกที่สองดูแลสไตล์

ฉันใช้ช่างเชื่อมความกว้างเป็นศูนย์ ‍

เพียงแค่ใส่หมายเลขโทรศัพท์ลงไปและมันก็ใช้งานได้สำหรับฉัน ทดสอบใน BrowserStack (และสารสีน้ำเงินสำหรับอีเมล)

ฉันมีปัญหาเดียวกัน ฉันพบคุณสมบัติบน UIWebView ที่ให้คุณปิดตัวตรวจจับข้อมูล

self.webView.dataDetectorTypes = UIDataDetectorTypeNone;

เพิ่มสิ่งนี้ฉันคิดว่ามันเป็นสิ่งที่คุณกำลังมองหา:

<meta name = "format-detection" content = "telephone=no">

ทางออกสำหรับ Webview!

สำหรับแอปพลิเคชัน PhoneGap-iPhone / PhoneGap-iOS คุณสามารถปิดใช้งานการตรวจจับหมายเลขโทรศัพท์ได้โดยการเพิ่มสิ่งต่อไปนี้ลงในผู้รับมอบสิทธิ์แอปพลิเคชันของโครงการของคุณ:

// ...

- (void)webViewDidStartLoad:(UIWebView *)theWebView 
{
    // disable telephone detection, basically <meta name="format-detection" content="telephone=no" />
    theWebView.dataDetectorTypes = UIDataDetectorTypeAll ^ UIDataDetectorTypePhoneNumber;

    return [ super webViewDidStartLoad:theWebView ];
}

// ...

แหล่งที่มา: ปิดการใช้งานการตรวจสอบโทรศัพท์ใน PhoneGap-iOS

หากต้องการปิดใช้งานการตรวจจับหมายเลขโทรศัพท์ในส่วนของหน้าให้ห่อข้อความที่ได้รับผลกระทบในแท็กจุดยึดด้วย href = "#" หากคุณทำเช่นนี้มือถือ Safari และ UIWebView ควรปล่อยไว้ตามลำพัง

<a href="#"> 1234567 </a>

คิดว่าฉันพบวิธีแก้ปัญหาแล้ว: ใส่ตัวเลขไว้ใน<label>องค์ประกอบ ยังไม่ได้ลองแท็กอื่น ๆ แต่<div>ปล่อยให้มันใช้งานได้บนหน้าจอหลักแม้จะมีtelephone=noแอตทริบิวต์

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

นอกจากนี้คุณยังสามารถใช้<a>ฉลากjavascript: void(0)เป็นhrefมูลค่า

ตัวอย่างดังต่อไปนี้:
<a href="javascript: void(0)">+44 456 77 89 87</a>

ฉันมีปัญหาเดียวกัน แต่ในเว็บแอป iPad

น่าเสียดายที่ไม่ใช่ ...

 <meta name = "format-detection" content = "telephone=no">

หรือ ...

0 = 0
9 = 9

... ทำงาน

แต่นี่คือสามแฮ็กที่น่าเกลียด:

• แทนที่หมายเลข "0" ด้วยตัวอักษร "O"
• แทนที่หมายเลข "1" ด้วยตัวอักษร "l"
• แทรกช่วงที่ไม่มีความหมาย: เช่น 555.5<span>5</span>5.5555

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

Kludgy แฮ็คอย่างแน่นอนและอาจไม่สามารถใช้งานได้หากคุณสร้างรหัสของคุณแบบไดนามิกจากข้อมูลหรือหากคุณไม่สามารถทำให้ข้อมูลของคุณสกปรกด้วยวิธีนี้

แต่เพียงพอในการเหน็บแนม

ฉันมีหมายเลข ABN (หมายเลขธุรกิจออสเตรเลีย) ที่ iPad Safari ยืนยันว่าเปลี่ยนเป็นลิงก์หมายเลขโทรศัพท์ ไม่มีข้อเสนอแนะช่วย ทางออกของฉันคือการใส่แท็ก img ระหว่างตัวเลข

ABN 98<img class="PreventSafariFromTurningIntoLink" /> 009<img /> 675<img /> 709

คลาสมีอยู่เพื่อบันทึกว่าแท็ก img นั้นมีไว้เพื่ออะไร

ใช้งานได้กับ iPad 1 (4.3.1) และ iPad 2 (4.3.3)

ประสบการณ์ของฉันเหมือนกับที่คนอื่นพูดถึง เมตาแท็ก ...

<meta name = "format-detection" content = "telephone=no">

... ทำงานเมื่อเว็บไซต์ทำงานใน Mobile Safari (เช่นกับ chrome) แต่หยุดทำงานเมื่อทำงานเป็น webapp (เช่นถูกบันทึกไว้ในหน้าจอหลักและทำงานโดยไม่ใช้ chrome)

โซลูชันที่ไม่เหมาะอย่างยิ่งของฉันคือการแทรกค่าลงในฟิลด์อินพุต ...

<input type="text" readonly="readonly" style="border:none;" value="3105551212">

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

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

(604) 555<span></span> -4321

<meta name = "format-detection" content = "telephone=no"> ใช้งานไม่ได้กับอีเมล: หาก HTML ที่คุณเตรียมไว้มีไว้สำหรับอีเมลเมตาแท็กจะถูกละเว้น

หากสิ่งที่คุณกำหนดเป้าหมายคืออีเมลนี่คือโซลูชันที่น่าเกลียด แต่ใช้ได้สำหรับ ya'll:

ตัวอย่างของ HTML ที่คุณต้องการหลีกเลี่ยงการเชื่อมโยงหรือจัดรูปแบบอัตโนมัติ:

will cease operations <span class='ios-avoid-format'>on June 1,
2012</span><span></span>.

และ CSS ที่จะทำให้เวทมนตร์เกิดขึ้น:

@media only screen and (device-width: 768px) and (orientation:portrait){
span.ios-date{display:none;}
span.ios-date + span:after{content:"on June 1, 2012";}
}

ข้อเสียเปรียบ: คุณอาจต้องค้นหาสื่อสำหรับคอมโบ iPad / iPhone แนวตั้ง / แนวนอนแต่ละอัน

คุณสามารถลองเข้ารหัสเป็นเอนทิตี HTML:

0 = 0
9 = 9

ปัญหาเดียวกันในแอป Sencha Touch แก้ไขด้วยเมตาแท็ก ( <meta name="format-detection" content="telephone=no">) ใน index.html ของแอป

เคล็ดลับที่ฉันใช้ซึ่งทำงานได้ดีกับ Mobile Safari เพียงอย่างเดียวคือการใช้โค้ดหลบหลีก HTML และเพิ่มจำนวนเล็กน้อยในหมายเลขโทรศัพท์ สิ่งนี้ทำให้เบราว์เซอร์ "ระบุ" หมายเลขโทรศัพท์ยากขึ้นเช่น

Phone: 1-8&#48;&#48;<span>-</span>62&#48;<span>-</span>38&#48;3

ฉันมีปัญหาเช่นกัน: Safari และเบราว์เซอร์มือถืออื่น ๆ เปลี่ยนรหัส VAT เป็นหมายเลขโทรศัพท์ ดังนั้นฉันต้องการวิธีการที่สะอาดเพื่อหลีกเลี่ยงในองค์ประกอบเดียวไม่ใช่ทั้งหน้า (หรือเว็บไซต์)
ฉันแบ่งปันวิธีการแก้ปัญหาที่เป็นไปได้ผมพบว่ามันเป็นด้อย แต่ก็ยังทำงานได้สวย: ฉันใส่ภายในหมายเลขที่ฉันไม่ต้องการที่จะกลายเป็นtel:ลิงค์ที่⁠นิติบุคคล HTML ซึ่งเป็นคำช่างไม้ตัวอักษรที่มองไม่เห็น ฉันพยายามที่จะอยู่แบบ semantic เพิ่มเติม (อย่างน้อยก็เรียงลำดับ) โดยใส่ char นี้ในบางจุดที่มีความหมายเช่นสำหรับรหัส VAT ฉันเลือกที่จะใส่ไว้ระหว่างกลุ่มตัวเลขที่แตกต่างกันตามรูปแบบดังนั้นสำหรับ VAT อิตาลีฉัน wrote: 0613605⁠048⁠8ที่แสดงใน0613605⁠048⁠8และจะไม่ถูกแปลงในหมายเลขโทรศัพท์

ตัวเลือกอื่นคือการแทนที่ยัติภังค์ในหมายเลขโทรศัพท์ของคุณด้วยอักขระ‑(U + 2011 'Unicode Non-Breaking Hyphen')

ฉันสับสนจริงๆในขณะนี้ แต่ในที่สุดก็คิดออก เราทำการอัปเดตในเว็บไซต์ของเราและมีตัวเลขบางส่วนเปลี่ยนเป็นลิงก์ แต่บางอันก็ไม่ได้ ปรากฎว่าตัวเลขจะไม่ถูกแปลงเป็นลิงก์หากอยู่ใน <fieldset> เห็นได้ชัดว่าไม่ใช่ทางออกที่ถูกต้องสำหรับสถานการณ์ส่วนใหญ่ แต่ในบางกรณีอาจเป็นวิธีที่เหมาะสม

คำตอบนี้สำคัญกว่าทุกอย่างตั้งแต่วันที่ 6-13-2012:

<a href="#" style="color: #666666; 
                   text-decoration: none;
                   pointer-events: none;">
  Boca Raton, FL 33487
</a>

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

นี่คือที่สมบูรณ์แบบสำหรับอีเมล HTML บน iOS และเบราว์เซอร์

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

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

a[href^=tel] {
 color: inherit;
 text-decoration:inherit;
}

แบ่งตัวเลขออกเป็นบล็อกข้อความแยกต่างหาก

301 <div style="display:inline-block">441</div> 3909

อีกวิธีคือการใช้ภาพของหมายเลข IP