Is there a workaround for text input maxlength not

问题:

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...

回答1:

Try this: HTML :

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

Jquery :

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

回答2:

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();