javascript - My kingdom for a selectable textbox -

javascript - My kingdom for a selectable textbox -

the challenge:

creating cross browser textbox/input field can select contents on click/tap.

a problem has eluded many years.

the issue:

when using touch device tap event fires when mouse uses click event. on apple devices tap event not fire onclick or onfocus. not safari specific bug because google chrome has same issue on apple devices not on android devices. there bug.

the standard way select text use:

$('input').focus(function () { $(this).select(); });

another selected work around mentioned on stack overflow is:

$('input').focus(function () { this.select(); //no jquery wrapper }).mouseup(function (e) { e.preventdefault(); });

both work nicely neither work on apple devices.

the working solution have found create selection range per post pure javascript , works great mean rewriting code every input field on site needed 'select effect' due beingness attached unique id.

$('input').click(function () { document.getelementbyid('id').selectionstart = 0 document.getelementbyid('id').selectionend = 999 });

so think utilize class instead of id changing code below reverts failing state , not work again.

$('input').click(function () { document.getelementsbyclassname('class').selectionstart = 0 document.getelementsbyclassname('class').selectionend = 999 });

this has been long standing problem , can conjure solution claim victory others have failed , truely coding master.

playground

what this?

function addclickselector(obj) { function selecttext(event) { event.target.selectionstart = 0 event.target.selectionend = 999 }; if (obj.addeventlistener) { obj.addeventlistener("click", selecttext, false); } else { obj.attachevent("onclick", selecttext); } }; [].foreach.call(document.getelementsbyclassname('selectonclick'), addclickselector);

javascript jquery html ios select