HTML 5 패턴 속성

Question

<select> 예를 들어, onClick의 요소가 title으로 표시되는 JavaScript 기능을 활성화하려면 HTML5에있는 pattern과 같은 방법이 있습니까?

<select>을 클릭하면 일부 조건 (중요하지 않음 - 일부 if 표현)에서 거품 기능과 같은 문장으로 표시되는 JavaScript 기능이 활성화됩니다. (pattern은 HTML5에 pattern) 패턴에 맞지 않는 무언가가있을 때 제목을 표시합니다.

Answer 1

select 요소에서 맞춤법 유효성 오류를 설정할 수 있습니다. setCustomValidity 메소드는 HTML5 CR의 constraint validation API에 포함되어 있습니다. 이로 인해 불일치보고와 유사한 방식으로 양식을 제출할 때 오류가보고되어야합니다. 예 :

<select onclick="this.setCustomValidity('Error in selection'); 
    title="Select a good option"> 

(실제로, 당신은 아마 onclick하지만 onchange를 사용하고 싶지 않아요하지만 문제는 특히 onClick 언급하고있다..)

문제가있다,하지만. 이 경우에만 오류 조건이 설정되고 요소가 :invalid 선택기와 일치하므로 일부 오류 표시기가 나타날 수 있지만 제출 단추 또는 이와 유사한 항목을 클릭하여 양식 데이터의 유효성을 검사하는 경우에만 오류 메시지가 표시됩니다. 이론적으로는 reportValidity 메서드를 사용하면 오류를 즉시 표시 할 수 있지만 브라우저는 아직 지원하지 않습니다.

Firefox에서 "풍선"의 너비는 select 요소의 너비에 의해 제한되며 가장 긴 문자 인 option이 짧으면 잘릴 수 있습니다. 간단한 CSS로 치료할 수 있습니다 (물론 select 메뉴 모양에 미칠 수있는 영향과 함께).

select:invalid { min-width: 150px } 

이 있습니다 :

는

select { min-width: 150px } 

은 또한 정상 상태에서 select 요소의 모양에 영향을주지 않지만 사용자 지정 오류를 설정할 때 폭 넓은해질 수 있습니다 다음과 같은 대안을 고려해 볼 수 있습니다 또한 파이어 폭스에는 버블에 속성 값 title이 포함되지 않는다. 가능한 해결 방법은 (문맥에 따라 가능할 수도 있고 그렇지 않을 수도 있음) title 속성을 생략하고 setCustomValidity에 전달하는 인수에 필요한 모든 텍스트를 포함시키는 것입니다.

가능한 유스 케이스는 사용자의 이전 선택에 따라 일부 옵션이 허용되지 않도록 select 메뉴가있는 양식입니다. 그런 다음 가질 수 있습니다

<select onchange="if(notAllowed(this)) setCustomValidity('Selection not allowed')" ...> 

여기서 notAllowed()은 정의한 적절한 테스트 기능입니다. 그러나 일부 사용자의 선택에 따라 허용되지 않는 옵션을 제거하거나 사용 중지하는 것이 유용 할 수 있습니다 (select). 분명히 더 많은 코딩 작업을 의미 할 수 있습니다 (특히 사용자가 다른 데이터를 변경하여 옵션을 다시 허용해야하는 경우이를 취소해야하므로).

Answer 2

내 의견으로는 Jukka의 솔루션은 뛰어나지 만 자바 스크립트에서 요구하는 것에 접근하는 것은 매우 간단합니다.나는 기본적인 스크립트와 example jsFiddle을 만들었다.

var SelectBoxTip = { 
    init : function(){ 
     SelectBoxTip.createTip(); 
     SelectBoxTip.addListeners(); 
    }, 
    addListeners : function(){ 
     var selects = document.getElementsByTagName("select"); 
     for (var i = 0; i < selects.length; i++){ 
      var zis = selects[i]; 
      if(zis.getAttribute('title')){//only if it has a title 
       zis.addEventListener("focus", SelectBoxTip.showTip, false); 
       zis.addEventListener("blur", SelectBoxTip.hideTip, false); 
      } 
     } 
    }, 
    createTip : function(){ 
     tip = document.createElement("div"); 
     tip.id = "tip"; 
     tip.style.position = "absolute"; 
     tip.style.bottom = "100%"; 
     tip.style.left = "0"; 
     tip.style.backgroundColor = "yellow"; 
     document.body.appendChild(tip); 
    }, 
    showTip : function(e){ 
     this.parentNode.appendChild(tip); 
     tip.innerHTML=this.title; 
     tip.style.display="block"; 
    }, 
    hideTip : function(e){ 
     tip.style.display="none"; 
    } 
}; 
SelectBoxTip.init();