使用网络组件,人们想要创建和覆盖的元素之一是< 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>
