Is it possible to overload the original value of the HTMLInputElement attribute?

Question

I am wondering if it is possible to modify the HTMLInputElement to display something other than a value that returns a value.

Why? Well, sometimes you want to show the user something nice, like a string , but you want to publish the ID on the server. If you use several logic / plugins at the input, this starts problematic with using an additional fake one. So why not include both in one ?! =)

I already noticed that you can define a getter for value prop. But I am losing the functionality of the subscriber setter, which will change the displayed text. = /

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; } }); 

So if you can tell me if it's possible and keep the native setter or just a stupid late night idea let me know xD

Answer 1

Although I do not recommend doing this, you can get (and cache) your own setter using Object.getOwnPropertyDescriptor , for example:

 (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

Why not use the drop down menu? This is the best user interface for the user and does everything you need:

 <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> 

If you need something more than an input / dropdown hybrid (like your comment), you can try Selectize.js library .

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

 <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> 

Selectize.js also supports loading ajax parameters and searching. I love it.