html - How can I lie to the user about the value of a text input using plain old JavaScript? -

the problem

i definition of evil, , such, take great pleasure in lying users.

presently, seeking way mislead these dumb fools respect content of text input boxes. want display value in input box, while submitting different value entirely. additionally, i'd reward users brave enough inspect element's value property honest response.

those wily supervillains @ google have done internally in own browser:

http://plnkr.co/edit/lrg9ygjmdvm8ngcop6nv (view in chrome. play input values)

here javascript:

window.addeventlistener('domcontentloaded', function() {   var date = document.getelementbyid('date');   var time = document.getelementbyid('time');    var show_date = document.getelementbyid('show_date');   var show_time = document.getelementbyid('show_time');    var display_real_value = function() {     show_date.innerhtml = date.value;     show_time.innerhtml = time.value;   }    display_real_value();    date.addeventlistener('change', display_real_value);   time.addeventlistener('change', display_real_value);   date.addeventlistener('keyup', display_real_value);   time.addeventlistener('keyup', display_real_value); }); 

the details

as see in example, displayed value totally detached in value property. need able programmatically modify both.

finally, i'd implement without jquery, , without adding additional dom elements, nor making assumptions context appear in. limiting support evergreen browsers acceptable, though support older browsers nice.

the use case

since i'll undoubtedly told bad idea or asked intend use for, i'll answer now: intention make polyfill date , time inputs work very chrome's implementation, , can styled , scripted without user having know how polyfill works.

the best idea far

i suspect might somewhere getters , setters, , storing actual value on different property of object, haven't had luck meeting of criteria.

additional explanation

the reason don't want add new, hidden dom elements because when user wants script date input they've added, have value of hidden input instead of 1 added. i'd make work transparently possible simple adding script , forgetting it.

here bullet points on need do:

• programmatically update string displayed in input. i've been using setrangetext this.
• programmatically update selected portion of displayed input. i've been using setselectionrange this.
• retrieve modified value using element.value on original input element.
• submit modified value when form submits.

maybe isn't possible. that's fine if best answer, i'm hoping there haven't thought of.

based on replies comments under question, here's think want do:

when programmer using polyfill applies element, hide element (e.g., element.style.display = "none";) , put own element(s) in place provide ui. standard practice; @ select2, instance.

when user of page updates value via ui, put appropriate value in field hid.

the programmer using polyfill doesn't have know how works; he/she reads value original field (again, code, or submitting form field in).

there's knowledge programmer has have: he/she has know if he/she wants set value of field using javascript after applying polyfill field, he/she should through api, not setting value of field directly. because there's no reliable, cross-browser event triggered when javascript sets value of form field. while could poll, looking updates, frankly seems unreasonable. (although suppose if had list of of special inputs in dom, , checked entire list once every 100ms or so, performance impact negligible. if programmer using polyfill, shouldn't big deal set values through api. suppose offer both options.)