Можностей, предоставляемых веб-разработчикам



Pdf көрінісі
бет133/232
Дата06.01.2022
өлшемі5,47 Mb.
#12231
1   ...   129   130   131   132   133   134   135   136   ...   232
Байланысты:
[Bryus Louson, Remi SHarp] Izuchaem HTML5. Bibliot(z-lib.org)

aria-valuemin=1
aria-valuemax=11
aria-valuenow=0
onchange="this.setAttribute('aria-valuenow',
¬ this.value)">
Такой код будет обновлять значение атрибута 
aria-valuenow
; это можно проверить, про-
следив за элементом с помощью DOM Inspector.
О
БРАТНАЯ СОВМЕСТИМОСТЬ  
С УСТАРЕВШИМИ БРАУЗЕРАМИ
Остается главный вопрос: что мы можем сделать для устаревших браузеров? Ответ звучит 
так: пока не отправляйте на пенсию вашу старую JavaScript-валидацию и модные сборщики 
данных DHTML; оставьте их в качестве запасного варианта и выполните проверку воз-
можностей.
Как мы видели раньше, встречая неподдерживаемый тип, браузеры прибегают к альтерна-
тивному варианту и используют 
type=text
. Таким образом, устаревший браузер, встретив 


118  •  Глава 3
input
 
type=email
, просто заменит это на 
input
 
type=text
. Данное изменение распростра-
няется и на DOM, поэтому, проверив тип элемента ввода, мы можем программным обра-
зом определить, поддерживает ли браузер новые крутые элементы, и в противном случае 
выбрать подходящий обходной путь.
Например, чтобы определить, поддерживается ли 
 
type=email>
, вы создаете новый 
 
type=email>
 с помощью JavaScript, но не добавляете его на страницу. Далее вы про-
сите ваш новый элемент сообщить, какой у него тип. Если в ответ вы получаете «email», 
браузер поддерживает эту возможность — и тогда пусть он делает все сам без JavaScript-
валидации. Если вы получаете в ответ «text», это значит, что было выбрано значение по 
умолчанию и эта возможность не поддерживается. Так что в идеале ваш код должен за-
гружать альтернативную библиотеку валидации, используя метод загрузки по требованию 
(lazy load).
var i = document.createElement("input");
i.setAttribute("type", "email");
return i.type !== "text";
Атрибуты тоже можно проверять.
return 'autofocus' in document.createElement("input");
Итак, что вам это дает? Во-первых, вы создаете удобные в использовании и доступные 
формы, предоставляя простые механизмы ввода (такие, как сборщики данных) и проверяя 
пользовательские данные еще до того, как будет отправлен первый запрос на сервер. Во-
вторых, вы экономите ресурсы, прибегая к помощи встроенных возможностей браузера 
(если они уже понимают валидацию на клиентской стороне и новые типы и атрибуты 
HTML5) или, в случе устаревших браузеров, изящно подтягивая поддержку традиционных 
библиотек JavaScript.
Методологию и обсуждение добавления такой поддержки в старые браузеры вы найдете 
в главе 12.


Достарыңызбен бөлісу:
1   ...   129   130   131   132   133   134   135   136   ...   232




©emirsaba.org 2024
әкімшілігінің қараңыз

    Басты бет