javascript - 将输入元素属性定义为 defineObject javascript 方法

Question

我如何定义诸如 placeholder 或 pattern 之类的属性:

Object.defineProperty(inputProto, 'placeholder', {value: 20, writable: true});

它有效，但是当我搜索 HTML 时，它显示 undefined。

如何使用 htmlElements 在 JavaScript 中定义 Web Component 属性？我不想在 HTML 中设置它们。

代码:

var inputProto = Object.create(HTMLInputElement.prototype);
//funciones del js API (prototype del componnente)   
inputProto.onClear = function() {
    this.value = "";
    this.style.position = "static";
    this.placeholder = "New Text";
}

inputProto.setPos = function(x, y) {
    this.style.top = x + "px";
    this.style.left = y + "px";
    this.style.position = "relative";
}

inputProto.setDimensions = function(width, height) {
    this.style.width = width + "px";
    this.style.height = height + "px";
}

inputProto.caps = function(input) {
    input = this.value;
    var regEx = /[A-Z]/;
    var match = regEx.test(input);
    if (match) {
        alert("Valid")
    } else {
        alert("Not valid")
    }
}

inputProto.lowerCaps = function(input) {
    input = this.value;
    var regEx = /[^A-Z]/;
    var match = regEx.test(input);
    if (match) {
        alert("Valid")
    } else {
        alert("Not valid")
    }
}

var EgComponent = document.registerElement('eg-input', {
    prototype: inputProto,
    extends: 'input'
});

var egcomp = new EgComponent();
//function de componente ya creado en el DOM
function test() {
    egcomp.onClear();
    egcomp.setDimensions(250, 15);
}

function test1() {
    egcomp.setDimensions(350, 15);
}

function test2() {
    egcomp.caps();
}

function test3() {
    egcomp.lowerCaps();
}

function test4() {
    egcomp.setPos(30, 580);
}
//metiendo el componente al html desde el dom
document.body.appendChild(egcomp);

Answer 1

您使用 Object.defineProperty 设置的属性的值为 undefined，因为您在原型(prototype)而不是 EgComponent 实例上设置它们:

/* That's what you do. */
Object.defineProperty(inputProto, "placeholder", {value: 20, writable: true});

value、pattern 和 placeholder 等属性是特定于实例而不是特定于原型(prototype)的，因此为了实际设置这些属性对于 EgComponent 的实例，您必须在 egcomp 上使用 defineProperty 而不是 inputProto:

/* That's what you should do to set the property. */
Object.defineProperty(egcomp, "placeholder", {value: 20, writable: true});

如果您如上所示定义属性，该属性将设置为 egcomp，您可以看到它是 20，如果您键入 egcomp。占位符； 在控制台中。但是，您可以很容易地注意到，即使设置了 egcomp 的 placeholder 属性，也没有设置 HTML 属性。您可以验证是否在控制台中键入 egcomp.getAttribute("placeholder");。要解决该问题，您可以放弃 Object.defineProperty 并以老式方式设置属性:

/* That's what you should do to set the property and HTML attribute. */
egcomp.placeholder = 20;

查看以下代码片段以了解其工作原理。

片段:

/* ---------- The EgComponent class ---------- */
;(function () {
  /* Create a new object from the prototype of HTMLInputElement. */
  var inputProto = Object.create(HTMLInputElement.prototype);

  /* Define some basic methods for the prototype of the component */
  Object.defineProperties(inputProto, {
    /* The function that clears a component instance. */
    onClear: {
      value: function() {
        this.value = "";
        this.style.position = "static";
        this.placeholder = "New Text";
      }
    },

    /* The function that sets the position of a component instance. */
    setPos: {
      value: function(x, y) {
        this.style.top = x + "px";
        this.style.left = y + "px";
        this.style.position = "relative";
      }
    },

    /* The function that sets the dimensions of a component instance. */
    setDimensions: {
      value: function(width, height) {
        this.style.width = width + "px";
        this.style.height = height + "px";
      }
    },

    /* The function that returns if the value of a component instance is uppercase. */
    caps: {
      value: function(input) {
        alert(/[A-Z]/.test(this.value) ? "Valid" : "Not Valid");
      }
    },

    /* The function that returns if the value of a component instance is lowercase. */
    lowerCaps: {
      value: function(input) {
        alert(/[a-z]/.test(this.value) ? "Valid" : "Not Valid");
      }
    },
  });

  /* Register the EgComponent in the browser. */
  window.EgComponent = document.registerElement("eg-input", {
    prototype: inputProto,
    extends: "input"
  });
})();



/* ---------- Instantiating an EgComponent ---------- */

/* Create a new instance of EgComponent. */
var egcomp = new EgComponent();

/* Set the 'placeholder' property. */
egcomp.placeholder = 20;

/* Set the 'pattern' property. */
egcomp.pattern = /[a-z]/;

/* Insert the component into the body of the document. */
document.body.appendChild(egcomp);

/* Log the component to the console. */
console.log(egcomp);