如何将输入字段包装在自定义元素中?

戴夫曼

我试图将输入字段包装在自定义元素内。

自定义元素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>属性,而无需手工连接所有内容?

Danny'365CSI'英格曼

不,这与拥有一个DIV和另一个子DIV没什么不同

您必须在CustomElement和内容之间建立连接。

一种方法是在自定义元素上定义一个Get / Set函数,以获取子输入的值

当然,也可以手动循环任何子元素并使用definePropertyProxies在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>.valuethis.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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章