@@ -222,9 +222,6 @@ Elm.Native.Graphics.Input.make = function(elm) {
222222 field.style.backgroundColor = 'transparent';
223223 field.style.pointerEvents = 'auto';
224224
225− field.elm_signal = model.signal;
226− field.elm_handler = model.handler;
227−
228225 field.type = model.type;
229226 field.placeholder = JS.fromString(model.placeHolder);
230227 field.value = JS.fromString(model.content.string);
@@ -232,6 +229,10 @@ Elm.Native.Graphics.Input.make = function(elm) {
232229 var direction = selection.direction.ctor === 'Forward' ? 'forward' : 'backward';
233230 setRange(field, selection.start, selection.end, direction);
234231
232+ field.elm_signal = model.signal;
233+ field.elm_handler = model.handler;
234+ field.elm_old_value = field.value;
235+
235236 function keyUpdate(event) {
236237 var curr = field.value;
237238 var next = (curr.slice(0, field.selectionStart) +
@@ -250,6 +251,29 @@ Elm.Native.Graphics.Input.make = function(elm) {
250251 event.preventDefault();
251252 }
252253
254+ function inputUpdate(event) {
255+ var curr = field.elm_old_value;
256+ var next = field.value;
257+ if (curr === next) {
258+ return;
259+ }
260+
261+ var direction = field.selectionDirection === 'forward' ? 'Forward' : 'Backward';
262+ var start = field.selectionStart;
263+ var end = field.selectionEnd;
264+ field.value = field.elm_old_value;
265+
266+ elm.notify(field.elm_signal.id, field.elm_handler({
267+ _:{},
268+ string: JS.toString(next),
269+ selection: {
270+ start: start,
271+ end: end,
272+ direction: { ctor: direction }
273+ },
274+ }));
275+ }
276+
253277 function mouseUpdate(event) {
254278 var direction = field.selectionDirection === 'forward' ? 'Forward' : 'Backward';
255279 elm.notify(field.elm_signal.id, field.elm_handler({
@@ -271,6 +295,7 @@ Elm.Native.Graphics.Input.make = function(elm) {
271295 elm.node.removeEventListener('mouseup', mouseup)
272296 }
273297 field.addEventListener('keypress', keyUpdate);
298+ field.addEventListener('input', inputUpdate);
274299 field.addEventListener('mousedown', mousedown);
275300
276301 return field;
@@ -282,7 +307,9 @@ Elm.Native.Graphics.Input.make = function(elm) {
282307
283308 field.type = newModel.type;
284309 field.placeholder = JS.fromString(newModel.placeHolder);
285− field.value = JS.fromString(newModel.content.string);
310+ var value = JS.fromString(newModel.content.string);
311+ field.value = value;
312+ field.elm_old_value = value;
286313 var selection = newModel.content.selection;
287314 var direction = selection.direction.ctor === 'Forward' ? 'forward' : 'backward';
288315 setRange(field, selection.start, selection.end, direction);