是否可以重载本机HTMLInputElement值getter？

Question

我想知道是否有可能修改一个HTMLInputElement显示不同于值prop的东西.

为什么？好吧,有时您想要向用户显示类似字符串的内容,但您想要将ID发布到服务器.如果您在输入上使用多个逻辑/插件,那么使用额外的伪造插件就会出现问题.那么为什么不把两者都包括在一起？!=)

我已经注意到可以为value道具定义一个吸气剂.但是我放弃了原生的setter功能,它将改变显示的文本.= /

HTML:

<input id="foobar" type="text"/>

JS:

var input = document.getElementById('foobar');
    input.value = 'Mr. Foo Bar';
    input.myHiddenValue = 123;

Object.defineProperty(input, 'value', {
    get: function(){
        return this.myHiddenValue; 
    }
});

所以,如果你能告诉我,如果这是可能的,并保持本地制定者或只是一个愚蠢的深夜想法,让我知道xD

Answer 1

虽然我不建议这样做,但您可以通过使用来获取(和缓存)本机setter Object.getOwnPropertyDescriptor,例如:

(function() {
  var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');

  descriptor.get = function() {
    // do whatever you want to do here
  }

  Object.defineProperty(HTMLInputElement.prototype, 'value', descriptor);  
})();