我正在尝试将输入字段包装在自定义元素中。
自定义元素 DOM 如下所示:
<custom-element>
<div class="fancy-wrapper">
<input value="4">
</div>
<custom-element>
虽然该元素应像这样工作:
<custom-input id="test"></custom-input>
<script>
let test = document.getElementById('test')
console.log(test.value); // should return 4 (value of inner input)
test.onkeydown = function(e){
console.log(e.target.value); // should the new value of the inner input
};
</script>
有没有办法将<custom-input>
属性重定向到其中的<input>
属性,而无需手动连接所有内容?
不,这和有一个 DIV 和另一个子 DIV 没有什么不同
您必须自己在自定义元素和内容之间建立连接。
一种方法是在自定义元素上定义一个 Get/Set 函数,该函数获取子输入的值
当然,您可以循环任何子元素并使用 defineProperty 或代理在 CustomElement 上赋值,而不是手动声明 Get/Set
下面的示例创建 2 个 INPUT 字段和一个this.input
数组:
<number-and-range>
<input type="number"> // this.input[0]
<input type="range"> // this.input[1]
</number-and-range>
并将 (GET/SET( <number-and.range>.value
连接到this.input[0]
customElements.define('number-and-range', class extends HTMLElement {
get value() {
return this.input[0].value;
}
set value(val) {
//input validation should go here
this.input[0].value = val;
console.clear();
console.log('new value:',val);
}
connectedCallback() {
this.input = ['number', 'range'] //create [0] and [1] values in array
.map((type, idx) => Object.assign(
this.appendChild(document.createElement('input')), {
type,
min: 20,
max: 50,
oninput: _ => this.value = this.input[~~!idx].value = this.input[idx].value //toggle [0] and [1]
}));
this.value = 42;//default value
}
});
let el=document.querySelector('number-and-range');
console.log(el.value);
el.value=99;
<body>
<h3>Custom Element : Connected INPUT and Range slider</h3>
Please enter a number between 20 and 50, or use the range slider
<p>
<number-and-range></number-and-range>
</p>
</body>
如果我理解你的问题,你想将custom-element
的所有属性复制到input
标签。
你能做的是,
//get all attributes of custom element
var el = document.getElementById ('test');
// get all attributes
var attrs = el.getAttributeNames(); // returns an array
// loop over attrs array and append the attribute and value in the input,
// I am assuming, you will not add copy id attribute here.
var input = el.getElementsByTagName ('input')[0];
for (var index = 0; index < attrs.length; index++) {
if (attrs[index] !== 'id') {
// set attribute of input with attribute name from the array,
// and get the value from from input.
input.setAttribute (attrs[index], el.getAttribute (attrs[index]));
}
}
这是一个想法,你可以做别的事情。
HTML:
<custom-element id="test">
<div><input value="43" /></div>
</custom-element>
JavaScript:
class CustomElement extends HTMLElement {
constructor() {
super();
const currentDocument = document.currentScript.ownerDocument;
this.template = currentDocument.querySelector('input');
}
get value() {
return this.template.getAttribute('value');
}
set onkeydown(cb) {
return this.template.addEventListener('keydown', cb);
}
}
window.customElements.define('custom-element', CustomElement);
let test = document.getElementById('test');
console.log(test.value);
test.onkeydown = function(e) {
console.log(e.target.value);
};
可以看看演示
您可以附加到自定义元素标记的内部 HTML 中
var string="<input type='text' ";
document.getElementById('test').onclick = function(e){
var attr=[...document.querySelector('#test').attributes].map(attr => attr.nodeName);
attr.forEach((e)=>{
var val=document.getElementById('test').getAttribute(e);
string+=e+"="+val + " ";
})
document.getElementById("test").innerHTML+=string + '//>' ;
console.log(document.getElementById("test").outerHTML)
};
<custom-input id="test">dd</custom-input>