Safari trên iPhone tự động tạo liên kết cho các chuỗi chữ số xuất hiện cho các số điện thoại. Tôi đang viết một trang web chứa địa chỉ IP và Safari đang biến nó thành liên kết số điện thoại. Có thể vô hiệu hóa hành vi này cho toàn bộ trang hoặc một thành phần trên một trang không?
Câu trả lời:
Đây có vẻ là điều đúng đắn, theo Tài liệu tham khảo Safari HTML :
<meta name="format-detection" content="telephone=no">Nếu bạn vô hiệu hóa điều này nhưng vẫn muốn liên kết điện thoại, bạn vẫn có thể sử dụng lược đồ URI "tel".
Đây là trang có liên quan tại Thư viện nhà phát triển của Apple.
Để vô hiệu hóa giao diện phân tích cú pháp điện thoại cho các thành phần cụ thể, CSS này dường như thực hiện thủ thuật:
.element { pointer-events: none; }
.element > a { text-decoration:none; color:inherit; }Quy tắc đầu tiên vô hiệu hóa nhấp chuột, quy tắc thứ hai chăm sóc kiểu dáng.
Tôi sử dụng công cụ nối có độ rộng bằng không ‍
Chỉ cần đặt nó ở đâu đó trong số điện thoại và nó hoạt động với tôi. Đã thử nghiệm trong BrowserStack (và Litmus cho email).
Tôi đã có cùng một vấn đề. Tôi đã tìm thấy một thuộc tính trên UIWebView cho phép bạn tắt các trình phát hiện dữ liệu.
self.webView.dataDetectorTypes = UIDataDetectorTypeNone;Đối với các ứng dụng PhoneGap-iPhone / PhoneGap-iOS, bạn có thể tắt phát hiện số điện thoại bằng cách thêm thông tin sau vào đại biểu ứng dụng của dự án:
// ...
- (void)webViewDidStartLoad:(UIWebView *)theWebView
{
// disable telephone detection, basically <meta name="format-detection" content="telephone=no" />
theWebView.dataDetectorTypes = UIDataDetectorTypeAll ^ UIDataDetectorTypePhoneNumber;
return [ super webViewDidStartLoad:theWebView ];
}
// ...nguồn: Vô hiệu hóa Phát hiện điện thoại trong PhoneGap-iOS .
Để tắt phát hiện số điện thoại trên một phần của trang, hãy bọc văn bản bị ảnh hưởng trong thẻ neo với href = "#". Nếu bạn làm điều này, Safari di động và UIWebView sẽ để nó một mình.
<a href="#"> 1234567 </a>metathẻ không hoạt động. Tuy nhiên, có lẽ nên thực hiện tốt hơn <a href="javascript:;">để ngăn tác dụng phụ từ thay đổi URL.
Hãy nghĩ rằng tôi đã tìm thấy một giải pháp: đặt số bên trong một <label>yếu tố. Không thử bất kỳ thẻ nào khác, nhưng vẫn <div>để nó hoạt động trên màn hình chính, ngay cả với telephone=nothuộc tính.
Có vẻ như rõ ràng từ các ý kiến trước đó rằng thẻ meta đã hoạt động, nhưng vì một số lý do đã bị phá vỡ trong các phiên bản sau của iOS, ít nhất là trong một số điều kiện. Tôi đang chạy 4.0.1.
<like this>. (Stack Overflow sử dụng ngôn ngữ định dạng có tên Markdown.) Tôi sẽ chỉnh sửa câu trả lời của bạn cho phù hợp.
#ký tự vào trước số điện thoại: theo tài liệu Apple "Tham khảo lược đồ URL của Apple": "Cụ thể, nếu một URL chứa các ký tự * hoặc #, ứng dụng Điện thoại không cố gắng quay số tương ứng số điện thoại."
Bạn cũng có thể sử dụng <a>nhãn với javascript: void(0)như hrefgiá trị.
Ví dụ như sau:<a href="javascript: void(0)">+44 456 77 89 87</a>
Tôi đã có cùng một vấn đề, nhưng trên một ứng dụng web iPad.
Thật không may, cả ...
<meta name = "format-detection" content = "telephone=no">cũng không ...
0 = 0
9 = 9... đã làm việc.
Nhưng, đây là ba hack xấu xí:
555.5<span>5</span>5.5555Tùy thuộc vào phông chữ bạn sử dụng, hai cái đầu tiên hầu như không đáng chú ý. Cái sau rõ ràng liên quan đến mã thừa, nhưng vô hình với người dùng.
Chắc chắn hack không thể hack và có thể không khả thi nếu bạn đang tạo mã của mình một cách linh hoạt từ dữ liệu hoặc nếu bạn không thể làm ô nhiễm dữ liệu của mình theo cách này.
Nhưng, đủ trong một nhúm.
Tôi đã có ABN (Số doanh nghiệp Úc) mà iPad Safari khăng khăng muốn chuyển thành liên kết số điện thoại. Không có gợi ý nào giúp được. Giải pháp của tôi là đặt các thẻ img giữa các số.
ABN 98<img class="PreventSafariFromTurningIntoLink" /> 009<img /> 675<img /> 709Lớp chỉ tồn tại để ghi lại những gì các thẻ img dành cho.
Hoạt động trên iPad 1 (4.3.1) và iPad 2 (4.3.3).
width="0" height="0"trợ giúp, nhưng vẫn hiển thị một pixel.
line-heightvà font-sizevề không.
Kinh nghiệm của tôi cũng giống như một số người khác đề cập. Thẻ meta ...
<meta name = "format-detection" content = "telephone=no">... Hoạt động khi trang web đang chạy trong Mobile Safari (nghĩa là có chrome) nhưng dừng hoạt động khi chạy dưới dạng webapp (nghĩa là được lưu vào màn hình chính và chạy mà không có chrome).
Giải pháp ít lý tưởng hơn của tôi là chèn các giá trị vào các trường đầu vào ...
<input type="text" readonly="readonly" style="border:none;" value="3105551212">Điều đó ít hơn lý tưởng bởi vì, mặc dù đường viền được đặt thành không, iOS hiển thị thanh màu xám nhiều pixel phía trên trường. Nhưng, tốt hơn là xem số đó là một liên kết.
Tôi đã tự mình thử nghiệm và thấy rằng nó hoạt động mặc dù nó chắc chắn không phải là một giải pháp tao nhã. Chèn một khoảng trống trong số điện thoại sẽ ngăn các máy dò dữ liệu biến nó thành một liên kết.
(604) 555<span></span> -4321<meta name = "format-detection" content = "telephone=no"> không hoạt động đối với email: nếu HTML bạn đang chuẩn bị cho email, thẻ meta sẽ bị bỏ qua.
Nếu những gì bạn đang nhắm mục tiêu là email, thì đây là một giải pháp xấu nhưng hiệu quả khác cho bạn:
Ví dụ về một số HTML bạn muốn tránh được liên kết hoặc tự động định dạng:
will cease operations <span class='ios-avoid-format'>on June 1,
2012</span><span></span>.Và CSS sẽ làm nên điều kỳ diệu:
@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";}
}Hạn chế: bạn có thể cần một truy vấn phương tiện cho mỗi combo chân dung / phong cảnh ipad / iphone
Bạn có thể thử mã hóa chúng dưới dạng các thực thể HTML:
0 = 0
9 = 9Vấn đề tương tự trong ứng dụng Sencha Touch được giải quyết bằng thẻ meta ( <meta name="format-detection" content="telephone=no">) trong index.html của ứng dụng.
Một mẹo tôi sử dụng không chỉ hoạt động trên Mobile Safari là sử dụng mã thoát HTML và một chút đánh dấu trong số điện thoại. Điều này khiến trình duyệt khó "nhận dạng" số điện thoại hơn, tức là
Phone: 1-800<span>-</span>620<span>-</span>3803Tôi cũng có vấn đề này: Safari và các trình duyệt di động khác chuyển đổi ID VAT thành số điện thoại. Vì vậy, tôi muốn một phương thức sạch để tránh nó trên một phần tử, không phải toàn bộ trang (hoặc trang).
Tôi đang chia sẻ một giải pháp khả thi mà tôi đã tìm thấy, nó không tối ưu nhưng vẫn khá khả thi: Tôi đặt, bên trong số tôi không muốn trở thành một tel:liên kết, ⁠thực thể HTML là ký tự vô hình của Word-Joiner . Tôi đã cố gắng duy trì ngữ nghĩa nhiều hơn (tốt, ít nhất là một loại) bằng cách đặt char này ở một vị trí nào đó, ví dụ: ID VAT tôi đã chọn đặt nó giữa các nhóm chữ số khác nhau theo định dạng của nó để có VAT Ý đã viết: biểu 0613605⁠048⁠8hiện trong 06136050488 và nó không được chuyển đổi trong một số điện thoại.
Tôi đã thực sự bối rối bởi điều này trong một thời gian nhưng cuối cùng đã tìm ra nó. Chúng tôi đã cập nhật trang web của mình và có một số số chuyển đổi thành liên kết và một số không. Hóa ra các số sẽ không được chuyển đổi thành một liên kết nếu chúng nằm trong <fieldset>. Rõ ràng không phải là giải pháp đúng cho hầu hết các trường hợp, nhưng trong một số trường hợp, nó sẽ là giải pháp đúng.
Câu trả lời này hơn hẳn mọi thứ kể từ ngày 6-13-2012:
<a href="#" style="color: #666666;
text-decoration: none;
pointer-events: none;">
Boca Raton, FL 33487
</a>Thay đổi màu thành bất kỳ màu nào phù hợp với văn bản của bạn, trang trí văn bản sẽ loại bỏ phần gạch chân, các sự kiện con trỏ ngăn không cho nó được xem như một liên kết trong trình duyệt (con trỏ không thay đổi thành một bàn tay)
Điều này là hoàn hảo cho các email HTML trên ios và trình duyệt.
pointer-events, chắc chắn. Tuy nhiên, nếu người dùng đang xem e-mail HTML của bạn trong IE 10, thì không tốt .
Tại sao bạn muốn loại bỏ liên kết, nó làm cho nó rất thân thiện với người dùng để có eoption.
Nếu bạn chỉ muốn xóa chỉnh sửa tự động, nhưng giữ cho liên kết hoạt động, chỉ cần thêm phần này vào CSS của bạn ...
a[href^=tel] {
color: inherit;
text-decoration:inherit;
}Một giải pháp khác là sử dụng hình ảnh của số IP