HTML 5 атрибут шаблон

Question

Есть ли способ в <select> списке, например, чтобы сделать onClick активировать функцию JavaScript, которая покажет title элемента так же, как pattern в HTML 5 делает?

Я хочу сделать это, когда вы нажмете на <select>, он активирует функцию JavaScript, которая при некотором условии (не имеет значения - какое-то выражение if) покажет предложение (которое я написал) в месте, подобном пузырьку (место, которое pattern показывает заголовок, когда что-то не соответствует шаблону (pattern в HTML5)).

Answer 1

Вы можете установить пользовательскую ошибку допустимости в элементе select, вызвав метод setCustomValidity, который является частью constraint validation API в HTML5 CR. Это должно приводить к сообщениям об ошибке при попытке отправки формы таким же образом, как и сообщения pattern. Пример:

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

(На практике, вы, вероятно, не хотите использовать onclick но onchange Но вопрос конкретно упоминается onClick.).

Есть проблемы, хотя. Это задает только условие ошибки и делает элемент совпадающим с селектором :invalid, поэтому может произойти некоторый индикатор ошибки, но сообщение об ошибке отображается только тогда, когда данные формы проверяются из-за нажатия кнопки отправки или чего-то подобного. Теоретически, вы можете использовать метод reportValidity, чтобы немедленно отобразить ошибку, но браузеры еще не поддерживают ее.

В Firefox ширина «пузыря» ограничена шириной элемента select и может сильно ухудшиться, если длинный текст option короткий. Для этого есть простое лечение CSS (хотя, конечно, это может повлиять на внешний вид меню select).

select { min-width: 150px } 

Вы могли бы также рассмотреть следующий вариант, который не влияет на внешний вид select элемента в нормальном состоянии, но может привести к его стать шире, когда вы установите пользовательскую ошибку:

select:invalid { min-width: 150px } 

Там есть также проблема, что Firefox не включает значение атрибута title в пузырь. Возможное обходное решение (которое может или не может быть осуществимо, в зависимости от контекста) состоит в том, чтобы опустить атрибут title и включить весь текст, необходимый в аргумент, который вы передаете setCustomValidity.

Возможный случай использования, который я могу себе представить, представляет собой форму с меню select, так что некоторые параметры там не допускаются в зависимости от предыдущих вариантов пользователя. Тогда вы могли бы

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

где notAllowed() является подходящей функцией тестирования, можно определить. Однако, вероятно, лучше использовать или удалять или отключать опции в select, как только некоторые пользовательские варианты делают их запрещенными. По общему признанию, это может означать большую работу по кодированию (тем более, что вам нужно будет отменить это, если пользователь изменит другие данные, чтобы параметры снова стали разрешаемыми).

Answer 2

На мой взгляд, решение Jukka является превосходным, однако его довольно тривиально делать что-то, приближающееся к тому, что вы просите в JavaScript.Я создал рудиментарный скрипт и 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();