it-swarm.com.ru

Укрощение вещи с автоматическим номером телефона в браузере Windows 10 Edge

Браузер Windows 10 Edge обнаруживает телефонные номера, даже если в системе не установлено приложение для телефона.

Он форматирует телефонный номер синим цветом с подчеркиванием, даже если он где-то находится в виде простого текста (некрасиво на некоторых фонах), более того, он обнаруживает, например, Номера НДС, как если бы они были номерами телефонов.

Итак, как мы можем контролировать это как веб-мастера:

  • как он отображает обнаруженные вещи (я полагаю, MSFT изобрел свой собственный CSS-селектор для этого материала?) 

  • как отключить обнаружение 

Желательно с чем-то, нацеленным только на этот браузер, и не рисковать испортить вещи для других или добавить нестандартные вещи в другой действительный код.

Правка:

  • Предложенный способ отключить обнаружение на основе того, как это делается в IE11 для телефонов Windows, не работает во всех моих тестах. Метатег не работает, и нестандартный атрибут html, похоже, работает.

  • Я посмотрел в Edge что-то проверяющее, и мне кажется, что вычисленный CSS для этих обнаруженных элементов - это то, что можно было бы увидеть там, если бы он не был обнаружен (то есть вычисленный CSS - это нормальный цвет без подчеркивания), предлагая мало шансов контролировать, как это отображается.

Правка:

тестовый пример 1: метатег (не выполняется)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- test -->
    <meta name="format-detection" content="telephone=no" />
  </head>
  <body>
    <p>text VAT BE 0123.456.789 text </p>
    <p>text +32 11 222 333 text</p>
  </body>
</html>

Тестовый пример 2: нестандартный атрибут html (работает)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <p x-ms-format-detection="none">text VAT BE 0123.456.789 text </p>
    <p>text +32 11 222 333 text</p>
  </body>
</html>

28
user3277192

Очевидно, обнаружение номера телефона было введено в Internet Explorer 11, но не на настольных компьютерах.

Вот способы управления этим, взятые из этой статьи MS: Распознавание формата номера телефона

  • Чтобы отключить поведение для элемента (и его дочерних элементов), установите для атрибута x-ms-format-detection значение «none».
  • Чтобы отключить поведение веб-страницы, используйте элемент meta: 

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

  • Чтобы включить поведение для элемента (и его дочерних элементов), установите для атрибута x-ms-format-detection значение «phone» или «all».

  • Чтобы выборочно контролировать поведение с помощью JavaScript, используйте setAttribute, чтобы изменить значение атрибута x-ms-format-detection ассоциированного элемента или его родителя. (Обратите внимание, что это необходимо сделать до того, как элемент или родительский объект будет отображен в DOM; динамические изменения не поддерживаются.)

Если я правильно понимаю статью, если обнаружение телефона отключено на уровне браузера, атрибут x-ms-format-detection (или метатег) будет игнорироваться.

27
jfrej

Использование x-ms-format-detection="none" сработало для меня. Однако мне пришлось добавить его в родительский элемент.

Например, мой номер телефона был заключен в класс span, поэтому мне пришлось добавить его в родительский div выше. Добавление непосредственно в тег span не решило проблему с Edge для меня. 

Надеюсь, это поможет

5
MikeBurgess

Я нашел способ, который идеально подходит для меня, и он состоит в том, чтобы заменить тег, в котором у вас есть номер, на «a» (якорь) вместо любого, который у вас может быть, без необходимости использования href. Затем установите для подчеркивания текста значение none и выберите цвет для наследования. Это все.

1
Jordi

Если вы добавите x-ms-format-detection = "none" к тегу body, он будет применен ко всей странице.

<body x-ms-format-detection="none">
0
zefram

Это должен быть комментарий, но у меня пока нет репутации, извините!

Опираясь на хороший предыдущий ответ от jfrej и последующий комментарий Бена Хиллиера, я хотел бы отметить, что x-ms-format-detection="none" может работать с элементом span, но не с display: inline по умолчанию, а скорее стилизовать ваш span с display: inline-block.

Аналогично, использование <div x-ms-format-detection="none" style="display: inline">1234567890</div> также не будет работать.

0
PMCS