HTML5 형식 지원을위한 JavaScript로 확인하십시오.

Question

브라우저가 HTML5 입력 형식 특성 색을 지원하면 "간단한"JavaScript로 어떻게 확인할 수 있습니까? (참고 : Modernizr을 사용하고 싶지 않습니다.)

Answer 1

좋은 방법은 종종 Modernizr source code을 통해 볼 수 있습니다. 여기에 관련 체크입니다 : 당신이 볼 수 있듯이 단지 유형 = "컬러"를 감지 아래로 잘라

// Run through HTML5's new input types to see if the UA understands any. 
// This is put behind the tests runloop because it doesn't return a 
// true/false like all the other tests; instead, it returns an object 
// containing each input type with its corresponding true/false value 

// Big thanks to @miketaylr for the html5 forms expertise. http://miketaylr.com/ 
Modernizr['inputtypes'] = (function(props) { 

    for (var i = 0, bool, inputElemType, defaultView, len = props.length; i < len; i++) { 

     inputElem.setAttribute('type', inputElemType = props[i]); 
     bool = inputElem.type !== 'text'; 

     // We first check to see if the type we give it sticks.. 
     // If the type does, we feed it a textual value, which shouldn't be valid. 
     // If the value doesn't stick, we know there's input sanitization which infers a custom UI 
     if (bool) { 

      inputElem.value   = smile; 
      inputElem.style.cssText = 'position:absolute;visibility:hidden;'; 

      if (/^range$/.test(inputElemType) && inputElem.style.WebkitAppearance !== undefined) { 

       docElement.appendChild(inputElem); 
       defaultView = document.defaultView; 

       // Safari 2-4 allows the smiley as a value, despite making a slider 
       bool = defaultView.getComputedStyle && 
         defaultView.getComputedStyle(inputElem, null).WebkitAppearance !== 'textfield' && 
         // Mobile android web browser has false positive, so must 
         // check the height to see if the widget is actually there. 
         (inputElem.offsetHeight !== 0); 

       docElement.removeChild(inputElem); 

      } else if (/^(search|tel)$/.test(inputElemType)){ 
       // Spec doesnt define any special parsing or detectable UI 
       // behaviors so we pass these through as true 

       // Interestingly, opera fails the earlier test, so it doesn't 
       // even make it here. 

      } else if (/^(url|email)$/.test(inputElemType)) { 
       // Real url and email support comes with prebaked validation. 
       bool = inputElem.checkValidity && inputElem.checkValidity() === false; 

      } else if (/^color$/.test(inputElemType)) { 
       // chuck into DOM and force reflow for Opera bug in 11.00 
       // github.com/Modernizr/Modernizr/issues#issue/159 
       docElement.appendChild(inputElem); 
       docElement.offsetWidth; 
       bool = inputElem.value != smile; 
       docElement.removeChild(inputElem); 

      } else { 
       // If the upgraded input compontent rejects the :) text, we got a winner 
       bool = inputElem.value != smile; 
      } 
     } 

     inputs[ props[i] ] = !!bool; 
    } 
    return inputs; 
})('search tel url email datetime date month week time datetime-local number range color'.split(' ')); 

,

var supportsColorInput = (function() { 
    var inputElem = document.createElement('input'), bool, docElement = document.documentElement, smile = ':)'; 

    inputElem.setAttribute('type', 'color'); 
    bool = inputElem.type !== 'text'; 

    // We first check to see if the type we give it sticks.. 
    // If the type does, we feed it a textual value, which shouldn't be valid. 
    // If the value doesn't stick, we know there's input sanitization which infers a custom UI 
    if (bool) { 

     inputElem.value   = smile; 
     inputElem.style.cssText = 'position:absolute;visibility:hidden;'; 

     // chuck into DOM and force reflow for Opera bug in 11.00 
     // github.com/Modernizr/Modernizr/issues#issue/159 
     docElement.appendChild(inputElem); 
     docElement.offsetWidth; 
     bool = inputElem.value != smile; 
     docElement.removeChild(inputElem); 
    } 

    return bool; 
})(); 

, 그것은 가장 사소한 일이 아니다, 그리고 변경할 수는; 그래서 Modernizr 같은 것을 포함하는 것이 좋은 생각 일 수 있습니다.