@@ -217,7 +217,11 @@ Elm.Native.Graphics.Input.make = function(elm) {
217217
218218 function renderField(model) {
219219 var field = newNode('input');
220+ field.style.border = 'none';
221+ field.style.outline = 'none';
222+ field.style.backgroundColor = 'transparent';
220223 field.style.pointerEvents = 'auto';
224+
221225 field.elm_signal = model.signal;
222226 field.elm_handler = model.handler;
223227
@@ -227,53 +231,61 @@ Elm.Native.Graphics.Input.make = function(elm) {
227231 var selection = model.content.selection;
228232 var direction = selection.direction.ctor === 'Forward' ? 'forward' : 'backward';
229233 setRange(field, selection.start, selection.end, direction);
230− field.style.border = 'none';
231234
232− function update() {
233− var direction = field.selectionDirection === 'backward' ? 'Backward' : 'Forward';
235+ function keyUpdate(event) {
236+ var curr = field.value;
237+ var next = (curr.slice(0, field.selectionStart) +
238+ String.fromCharCode(event.keyCode) +
239+ curr.slice(field.selectionEnd));
240+ var pos = field.selectionEnd + 1;
234241 elm.notify(field.elm_signal.id, field.elm_handler({
235242 _:{},
236− string:JS.toString(field.value),
243+ string: JS.toString(next),
237244 selection: {
238− start:field.selectionStart,
239− end:field.selectionEnd,
240− direction: { ctor:direction }
245+ start: pos,
246+ end: pos,
247+ direction: { ctor:'Forward' }
241248 },
242249 }));
250+ event.preventDefault();
243251 }
244− function mousedown() {
245− update();
252+
253+ function mouseUpdate(event) {
254+ var direction = field.selectionDirection === 'forward' ? 'Forward' : 'Backward';
255+ elm.notify(field.elm_signal.id, field.elm_handler({
256+ _:{},
257+ string: field.value,
258+ selection: {
259+ start: field.selectionStart,
260+ end: field.selectionEnd,
261+ direction: { ctor: direction }
262+ },
263+ }));
264+ }
265+ function mousedown(event) {
266+ mouseUpdate(event);
246267 elm.node.addEventListener('mouseup', mouseup);
247268 }
248− function mouseup() {
249− update();
269+ function mouseup(event) {
270+ mouseUpdate(event);
250271 elm.node.removeEventListener('mouseup', mouseup)
251272 }
252− field.addEventListener('keyup', update);
273+ field.addEventListener('keypress', keyUpdate);
253274 field.addEventListener('mousedown', mousedown);
254275
255276 return field;
256277 }
257278
258− function updateField(node, oldModel, newModel) {
259− node.elmHandler = newModel.handler;
260− var newStr = JS.fromString(newModel.content.string);
261− if (node.value !== newStr) node.value = newStr;
279+ function updateField(field, oldModel, newModel) {
280+ field.elm_signal = newModel.signal;
281+ field.elm_handler = newModel.handler;
262282
283+ field.type = newModel.type;
284+ field.placeholder = JS.fromString(newModel.placeHolder);
285+ field.value = JS.fromString(newModel.content.string);
263286 var selection = newModel.content.selection;
264− var start = selection.start;
265− var end = selection.end;
266287 var direction = selection.direction.ctor === 'Forward' ? 'forward' : 'backward';
267− if (end < start) {
268− start = end;
269− end = selection.start;
270− }
271−
272− if (node.selectionStart !== start
273− || node.selectionEnd !== end
274− || node.selectionDirection !== direction) {
275− setRange(node, start, end, direction);
276− }
288+ setRange(field, selection.start, selection.end, direction);
277289 }
278290
279291 function mkField(type) {