Как избежать потребности в щелчке при нажатой клавише Ctrl в мультиизбранном поле с помощью JavaScript?
Я думал, что это будет простым взломом, но я теперь искал в течение многих часов, и не может замеченный найти правильный критерий поиска. Я хочу иметь дежурное блюдо, несколько выбирают поле (<select multiple="multiple">) кроме я не хочу, чтобы пользователь должен был удержать клавишу CTRL для создания множественных выборов.
Другими словами, я хочу, чтобы щелчок левой кнопкой переключился <option> элемент это находится под курсором, не изменяя ни одних из других. В других других словах я хочу что-то, что похоже на поле комбинированного списка, но ведет себя как группа флажков.
Кто-либо может предложить простой способ сделать это в JavaScript?Спасибо.
4 ответа
Necromancing.
выбранный ответ без jQuery.
кроме того, это избежало устанавливать фокус, когда опция нажата, потому что необходимо сделать это сами, если Вы пишете e.preventDefault...
Упущение сделать фокус влиял бы на моделирование CSS, например, начальную загрузку, и т.д.
var options = [].slice.call(document.querySelectorAll("option"));
options.forEach(function (element)
{
// console.log("element", element);
element.addEventListener("mousedown",
function (e)
{
e.preventDefault();
element.parentElement.focus();
this.selected = !this.selected;
return false;
}
, false
);
});
Должен был решить эту проблему самостоятельно и заметил прослушиваемое поведение, которое будет иметь простой перехват mousedown и установка атрибута, так сделал переопределение избранного элемента, и это работает хорошее.
jsFiddle: http://jsfiddle.net/51p7ocLw/
Примечание: Этот код действительно фиксирует ошибочное поведение путем замены избранного элемента в DOM. Это немного агрессивно и повредит обработчики событий, которые Вы, возможно, присоединили к элементу.
window.onmousedown = function (e) {
var el = e.target;
if (el.tagName.toLowerCase() == 'option' && el.parentNode.hasAttribute('multiple')) {
e.preventDefault();
// toggle selection
if (el.hasAttribute('selected')) el.removeAttribute('selected');
else el.setAttribute('selected', '');
// hack to correct buggy behavior
var select = el.parentNode.cloneNode(true);
el.parentNode.parentNode.replaceChild(select, el.parentNode);
}
}<h4>From</h4>
<div>
<select name="sites-list" size="7" multiple>
<option value="site-1">SITE</option>
<option value="site-2" selected>SITE</option>
<option value="site-3">SITE</option>
<option value="site-4">SITE</option>
<option value="site-5">SITE</option>
<option value="site-6" selected>SITE</option>
<option value="site-7">SITE</option>
<option value="site-8">SITE</option>
<option value="site-9">SITE</option>
</select>
</div>ответ techfoobar является багги, он отменяет выбор все опции при перетаскивании мыши.
ответ Sergio интересен, но клонирование и удаление, ограниченное событиями к выпадающему, не являются хорошей вещью.
Примечание: не работает над Firefox, но работает отлично над Safari/Chrome/Opera. (Я не протестировал его на IE)
У меня была та же проблема сегодня, обычно совет состоит в том, чтобы использовать список скрытых флажков и эмулировать поведение с помощью CSS, таким образом более легко справиться, но в моем случае я не хочу изменять HTML.
В данный момент я протестировал этот код только с Google Chrome, я не знаю, должен ли работы с другим браузером, но он:
var changed;
$('select[multiple="multiple"]').change(function(e) {
var select = $(this);
var list = select.data('prevstate');
var val = select.val();
if (list == null) {
list = val;
} else if (val.length == 1) {
val = val.pop();
var pos = list.indexOf(val);
if (pos == -1)
list.push(val);
else
list.splice(pos, 1);
} else {
list = val;
}
select.val(list);
select.data('prevstate', list);
changed = true;
}).find('option').click(function() {
if (!changed){
$(this).parent().change();
}
changed = false;
});
, Конечно, предложения приветствуются, но я не нашел иначе