Question

我想知道是否可以修改HTMLInputElement以显示与值prop返回的内容不同的内容。

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

我已经注意到可以为value道具定义一个getter。但是我放弃了原生的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

虽然我不建议这样做，但您可以使用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);  
})();

Answer 2

为什么不使用下拉菜单？它为用户提供了更好的用户界面，并完成了您想要的一切：

＆＃13;

<div ng-app>
  <select ng-model="test">
    <!-- Angular used to show selection, but not needed -->
    <option value="0">Coffee</option>
    <option value="1">Breakfast</option>
    <option value="2">Morning Snack</option>
    <option value="3">Lunch</option>
    <option value="4">Afternoon Snack</option>
    <option value="5">Dinner</option>
    <option value="6">Dessert</option>
  </select>
  <br>
  Selection: {{test}}
</div>

<!-- Angular used to show selection. Input.value will work the same way -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

＆＃13;

如果您想要更多输入/下拉混合（例如评论），可以尝试Selectize.js library。

＆＃13;

$(function() {
  $("#test").selectize();
});

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://raw.githubusercontent.com/brianreavis/selectize.js/master/dist/js/standalone/selectize.min.js"></script>

<select id="test" placeholder="Select a meal...">
  <option value="0">Coffee</option>
  <option value="1">Breakfast</option>
  <option value="2">Morning Snack</option>
  <option value="3">Lunch</option>
  <option value="4">Afternoon Snack</option>
  <option value="5">Dinner</option>
  <option value="6">Dessert</option>
</select>

＆＃13;

Selectize.js还支持ajax选项加载和搜索。我真的很喜欢它。

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

2 个答案: