表单 – 本机形式的自定义输入元素

使用网络组件,人们想要创建和覆盖的元素之一是< input>.输入元素是坏的,因为它们根据类型很多,通常很难自定义,所以人们总是想修改它们的外观和行为是正常的.

两年前或多或少地,当我第一次听到网路组件时,我很兴奋,我想要创建的第一种元素是自定义输入元素.现在规格完成了,就像我对输入元素的需求没有解决.阴影DOM应该允许我改变他们的内部结构和外观,但输入元素被列入黑名单,不能有一个影子根源,因为它们已经有一个隐藏的.如果我想添加额外的逻辑和行为,定制,内置元素与属性应该做的技巧;我不能做影子DOM魔法,但至少我有这个,对吧？好的Safari不会实现它,聚合物不会使用它们,因为这样的原因,闻起来就像将要被废弃的标准.

所以我留下了正常的自定义元素;他们可以使用阴影DOM,并有任何我想要的逻辑,但我希望他们成为输入！他们应该在< form>内部工作,但如果我是正确的,表单元素不喜欢它们.我必须编写自己的自定义表单元素,以及复制所有原生的表单元素吗？我必须告别FormData,验证API等吗？我是否失去了能够使用没有javascript的输入的表单？

解决方法

您可以创建一个具有所需外观和行为的自定义元素.

在其中放置一个隐藏的< input>元素,其名称(将被传递到< form>)).

修改自定义元素“可见值”时,更新其值属性.

我在this answer to a similar SO question发了一个例子.

class CI extends HTMLElement 
{
    constructor ()
    {
        super()
        var sh = this.attachShadow( { mode: 'open' } )
        sh.appendChild( tpl.content.cloneNode( true ) )
    }
 
    connectedCallback ()
    {
        var view = this
        var name = this.getAttribute( 'name' )
 
        //proxy input elemnt
        var input = document.createElement( 'input' )
        input.name = name
        input.value = this.getAttribute( 'value' )
        input.id = 'realInput'
        input.style = 'width:0;height:0;border:none;background:red'
        input.tabIndex = -1
        this.appendChild( input )
 
 
        //content editable
        var content = this.shadowRoot.querySelector( '#content' )
        content.textContent = this.getAttribute( 'value' )
        content.oninput = function ()
        {
            //console.warn( 'content editable changed to',content.textContent )
            view.setAttribute( 'value',content.textContent)
        }
 
        //click on label
        var label = document.querySelector( 'label[for="' + name + '"]' )
        label.onclick = function () { content.focus() }
 
        //autofill update
        input.addEventListener( 'change',function ()
        {
            //console.warn( 'real input changed' )
            view.setAttribute( 'value',this.value )
            content.value = this.value 
        } )
 
        this.connected = true 
    }
 
    attributeChangedCallback ( name,old,value )
    {
        //console.info( 'attribute %s changed to %s',name,value )
        if ( this.connected )
        {
            this.querySelector( '#realInput' ).value = value 
            this.shadowRoot.querySelector( '#content' ).textContent = value 
        }                
    }
 
}
CI.observedAttributes = [ "value" ]
customElements.define( 'custom-input',CI )
//Submit
function submitF ()
{
    for( var i = 0 ; i < this.length ; i++ )
    {
        var input = this[i]
        if ( input.name ) console.log( '%s=%s',input.name,input.value )
    } 
}
S1.onclick = function () { submitF.apply(form1) }

<form id=form1>
    <table>
        <tr><td><label for=name>Name</label>        <td><input name=name id=name>
        <tr><td><label for=address>Address</label>  <td><input name=address id=address>
        <tr><td><label for=city>City</label>        <td><custom-input id=city name=city></custom-input>
        <tr><td><label for=zip>Zip</label>          <td><input name=zip id=zip>
        <tr><td colspan=2><input id=S1 type=button value="Submit">
    </table>
</form>
<hr>
<div>
  <button onclick="document.querySelector('custom-input').setAttribute('value','Paris')">city => Paris</button>
</div>
 
<template id=tpl>
  <style>
    #content {
      background: dodgerblue;
      color: white;
      min-width: 50px;
      font-family: Courier New,Courier,monospace;
      font-size: 1.3em;
      font-weight: 600;
      display: inline-block;
      padding: 2px;
    }
  </style>
  <div contenteditable id=content></div>
  <slot></slot>
</template>

表单 – 本机形式的自定义输入元素

解决方法

猜你在找的HTML相关文章