7

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 position the caret (with the mouse or keyboard) somewhere in the middle of the string (not at the very beginning or end), typing will cause more characters to be entered.

Specifically, it acts like it is ignoring the characters after the caret when calculating the "length" of the string, so if the caret was originally placed at position 1, 9 more characters will be enterable.

This is not reproducible on the 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 wrong? Is this a known thing with workarounds? I've googled a bit with no joy...

2
  • 2
    This is fixed in safari 9.0, meanwhile I sticked with toto21's solution for maxlength in safari 8. Sep 3, 2015 at 8:13
  • Good news, thanks for sharing. :)
    – MHarris
    Sep 8, 2015 at 13:07

2 Answers 2

8

Try this: HTML :

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

Jquery :

$('input[name="mytest"]').keypress(function() {
    if (this.value.length >= 5) {
        return false;
    }
});
3
  • This causes a bug in Firefox, once the maximum number of characters has been reached you can't use tab or [CTRL+A] and delete/backspace doesn't work. It stops all actions of printable and non printable characters. May 6, 2016 at 10:28
  • Indeed ! - So use keydown like this : $('input[name="mytest"]').keydown(function(e) { //alert(e.keyCode); if (e.keyCode != 8 && this.value.length >= 5) { return false; } });
    – toto21
    May 11, 2016 at 16:33
  • 1
    Better : test if browser is safari and version is < 9
    – toto21
    May 11, 2016 at 16:44
0

I had a similar problem, after a lot of research, brain racking and help from this site, this is what I did. It prevents the select all [CTRL+A], backspace/delete bugs from occurring in Firefox. Works fine for me. Might work for someone else too. Excuse the 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's 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();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.