Скрыть ввод диапазона, если он несовместим

Question

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

<input type="range" name="amountRange" min="0" max="20" value="0" onchange="this.nextElementSibling.value=this.value" /> 
 
<input type="number" name="amountInput" min="0" max="20" value="0" onchange="this.previousElementSibling.value=this.value" />

Проблема заключается в том, что некоторые браузеры (в основном IE9, которые я хочу, чтобы поддержать) не совместимы с входами диапазона, поэтому диапазон будет отображаться в текстовом поле. Это означает, что они будут видеть два текстовых урн так:

<input type="text" name="amountRange" min="0" max="20" value="0" onchange="this.nextElementSibling.value=this.value" /> 
 
<input type="text" name="amountInput" min="0" max="20" value="0" onchange="this.previousElementSibling.value=this.value" />

Как я должен скрыть входной диапазон, если браузер не совместим с ними?

Answer 1

Javascript может отличать определение типа входного сигнала, как так:

var rangeInput = document.forms.myformname.amountRange; 
if (rangeInput.type === 'range') { 
    // This browser supports range. 
} 
else { 
    rangeInput.style.display 'none'; 
} 

кажется, что попытка установить input.type = "somethingIEdoesntunderstand" будет на самом деле привести к ошибке в IE9; и все браузеры будут фильтровать возможные типы, чтобы они знали.

Answer 2

Вы можете легко обрабатывать все HTML-браузер несовместимостью и использовать их в своих интересах с modernizr.js, убедитесь, импортировать библиотеку:

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> 

, а затем проверить ваш веб-страницы в IE, в HTML-тег вы найдете некоторый атрибут, начинающийся со слова «нет», что-то вроде no-canvas и т. д., все неподдерживаемые функции начнутся без HTML-или-CSS, и вы можете использовать его для применения любого стиля, который вы хотите.

Exemple:

.no-cssreflections { 
      border-radius: 15px; 
     }