Is there a workaround for maxlength text input that doesn't work in Safari?

Question

In Safari version 8.0 (10600.1.25.1) on OS X 10.10.1, if you have the following:

<input type="text" maxlength="5" > 

Fill it with 5 characters, and then place the cursor (using the mouse or keyboard) somewhere in the middle of the line (not at the very beginning or at the end), more characters will be entered as you type.

In particular, it acts just as it ignores the characters after the carriage when calculating the "length" of the line, so if the carriage was originally placed at position 1, another 9 characters will be added.

This does not play on latest chrome or firefoxes.

The effect can be seen on this page: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_maxlength

Am I using maxlength incorrectly? Is this a known thing with workarounds? I ruined a little without joy ...

Answer 1

Try the following: HTML:

 <input name="mytest" type="text"> 

JQuery:

 $('input[name="mytest"]').keypress(function() { if (this.value.length >= 5) { return false; } }); 

Answer 2

I had a similar problem, after many studies, brains and help from this site, this is what I did. This prevents all [CTRL + A], backspace / delete errors from appearing in Firefox. Works great for me. May work for someone else. Sorry global namespace pollution.

 function getBrowserInfo() { //function that returns an array with browser name at index 0, version at index 1 var N=navigator.appName, ua=navigator.userAgent, tem; var M=ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i); if(M && (tem= ua.match(/version\/([\.\d]+)/i))!= null) { M[2]= tem[1]; } M = M ? [M[1], M[2]]: [N, navigator.appVersion, '-?']; return M; } function crossBrowserify() { //checks for browsers that lack support and adds the handler leaving compatible browsers like Firefox unaffected var browserInfoArr = getBrowserInfo(), browser = browserInfoArr[0], browserVersion = browserInfoArr[1]; if(browser.toLowerCase() == "safari" && browserVersion >= 8 && browserVersion < 9) { $(document).on("keypress", "input[type='text']", preventExcessCharacters); } } function preventExcessCharacters(e) { //fix for a bug in Mac OSX Safari 8 var $this = $(this), //caching element to prevent performance issues due to frequent DOM access mxLength = $this.attr("maxlength"); if(mxLength){ if (e.which < 0x20) { // e.which < 0x20, then it not a printable character // e.which === 0 - Not a character return; // Do nothing } if (this.value.length == mxLength) { e.preventDefault(); } else if (this.value.length > mxLength) { // Maximum exceeded // fix for copy paste bug this.value = this.value.substring(0, mxLength); } } } //set handler if browser lacks support crossBrowserify();