Может ли пользовательский элемент расширять элемент ввода?

Используя спецификацию веб-компонентов, возможно ли расширить определенный тип элемента <input>?

Этот вопрос похож на мой, но только указывает, как расширить элемент button, а не текстовый ввод или любой другой вариант тега <input>.

В моем случае я хотел бы расширить флажок (<input type="checkbox" />) или переключатель (<input type="radio" />), чтобы обернуть более сложный пользовательский интерфейс вокруг той же функциональности основного элемента ввода, но я не вижу никакого способа сделать это с помощью Синтаксис extends предоставлен document.registerElement. На мой взгляд, может показаться, что вы должны быть в состоянии сделать что-то вроде следующего:

document.registerElement('x-checkbox', {
    prototype: Object.create(HTMLInputElement.prototype),
    extends: 'input[type=checkbox]'
});

Однако этот конкретный случай, кажется, не задокументирован и не объяснен нигде, что я могу найти, и я вполне уверен, что этот пример не будет работать на практике.


javascript html web-component
person JoshMock    schedule 25.08.2014    source источник
comment
Я нашел пример расширения элемента ввода здесь: developer.mozilla.org/en -US/Apps/Tools_and_frameworks/. Это помогает?   -  person Matt Browne    schedule 26.08.2014
comment
Что касается конкретно расширения флажка, вы можете попробовать выполнить setAttribute('type', 'checkbox') для объекта HTMLInputElement, прежде чем устанавливать его как prototype.   -  person Matt Browne    schedule 26.08.2014
comment
@MattBrowne Это скорее намек на то, что это возможно, чем пример того, как это сделать. :)   -  person JoshMock    schedule 26.08.2014
comment
@MattBrowne Частично я надеюсь, что мне не придется воссоздавать логику переключения флажка или обработки того, какое радио проверяется в группе переключателей самостоятельно. Не уверен, что установка атрибута type сама по себе решит эту проблему.   -  person JoshMock    schedule 26.08.2014
comment
@JoshMock — Виола: jsfiddle.net/DerekL/5utco0en   -  person Derek 朕會功夫    schedule 26.08.2014
comment
@Derek朕會功夫 А, атрибут is. Не об этом думал. Вы можете быть на что-то там.   -  person JoshMock    schedule 26.08.2014
comment
@JoshMock - я считаю, что is необходимо использовать, если вы расширяете другой стандартный элемент HTML. Поскольку элемента checkbox нет, вы не можете расширять такие вещи, как input[type=checkbox] или радио. Расширьте весь элемент ввода и укажите тип.   -  person Derek 朕會功夫    schedule 26.08.2014
comment
@Derek朕會功夫: знаете ли вы, включается ли полученный пользовательский элемент в отправку формы, как реальный ввод?   -  person dandavis    schedule 26.08.2014
comment
@dandavis - он расширен из прототипа ввода, поэтому он должен делать все, что может обычный ввод, однако я не уверен.   -  person Derek 朕會功夫    schedule 26.08.2014
comment
@Derek朕會功夫 Вы должны превратить свой первоначальный комментарий в ответ, чтобы получить за него баллы, которых вы заслуживаете. :)   -  person JoshMock    schedule 02.09.2014

Ответы (2)


arrow_upward
13
arrow_downward

Атрибут is необходимо использовать, если вы расширяете другой стандартный HTML-элемент. Поскольку элемента «флажок» нет, вы не можете расширять такие элементы, как input[type=checkbox] или radio. Расширьте элемент input (HTMLInputElement) и укажите тип в createdCallback:

<body>
    <input is="totally-not-checkbox">   <!-- Custom Checkbox #1 -->
</body>

var proto = Object.create(HTMLInputElement.prototype);
proto.createdCallback = function() {
    this.type = "checkbox";
    this.addEventListener("change", this.toggleZoom);
};
proto.toggleZoom = function(){
    $(this).toggleClass("zoom");                        //FYI $ is jQuery
};

var nCB = document.registerElement("totally-not-checkbox", {
    prototype: proto,
    extends: 'input'
});

document.body.appendChild(new nCB());  //Custom Checkbox #2

Демонстрация: http://jsfiddle.net/DerekL/5utco0en/

Поскольку пользовательский элемент наследуется от HTMLInputElement, все исходные свойства и методы наследуются. Взгляните на эту демонстрацию: http://jsfiddle.net/DerekL/6gtLp8p5/

proto.toggleZoom = function(e){
    $(this).toggleClass("zoom");
    console.log(this, this.checked);
};

this.checked вернет правильное значение checked, как и исходный флажок.

person Derek 朕會功夫    schedule 02.09.2014

arrow_upward
0
arrow_downward

6 лет спустя,

Я создал свой собственный. https://elements-x.com/component/input/text Он оборачивает <input> теги с индивидуальным дизайном и раскрывающимся списком, и он поддерживает следующие типы.

  • текст
  • дата
  • время
  • флажок
  • радио
  • цвет
  • файл
  • выключатель

введите здесь описание изображения

person allenhwkim    schedule 06.06.2021