如何在達到maxlength後限制輸入字符？

Question

我有一個輸入特殊符號按鈕作爲附加。

HTML

<div class="col-md-3 col-xs-9 col-sm-9"> 
    <div class="input-group"> 
    <input type="text" maxlength="10" class="form-control" id="symboltext"> <span class="input-group-btn"> 
                     <button class="btn btn-default" type="button" id="popbutton" data-placement="bottom" data-container="body"><span class="glyphicon glyphicon-edit"></span> 
    </button> 
    </span> 
    </div> 
</div> 

JQuery的

var popupElement = '<div class="btn-group" role="group"><button class="btn btn-sm btn-default" id="regbtn"><span class="glyphicon glyphicon-registration-mark"></button><button class="btn btn-sm btn-default" id="copyrightbtn"><span class="glyphicon glyphicon-copyright-mark"><span></button><button class="btn btn-sm btn-default" id="trademarkbtn"><sup>TM</sup></button></div>'; 
var lastPoint = 0; 
$('#popbutton').popover({ 
    animation: true, 
    content: popupElement, 
    html: true 
}); 

function textbox() { 
    var ctl = document.getElementById('symboltext'); 
    var startPos = ctl.selectionStart; 
    var endPos = ctl.selectionEnd; 
    lastPoint = startPos; 
    return { 
    s: startPos, 
    e: endPos 
    }; 
} 

function getVal(insert) { 
    var val = $("#symboltext").val(); 
    var index = textbox(); 
    val = val.slice(0, index.s) + insert + val.slice(index.s) 
    lastPoint += 1; 
    return val; 
} 

$(document).on('click', "#trademarkbtn", function() { 
    var val = getVal("\u2122"); 
    var input = $("#symboltext"); 
    input.val(val).focus(); 
    input[0].selectionStart = input[0].selectionEnd = lastPoint; 
}); 


$(document).on('click', "#regbtn", function() { 
    var val = getVal("\u00AE"); 
    var input = $("#symboltext"); 
    input.val(val).focus(); 
    input[0].selectionStart = input[0].selectionEnd = lastPoint; 
}); 

$(document).on('click', "#copyrightbtn", function() { 
    var val = getVal("\u00A9"); 
    var input = $("#symboltext"); 
    input.val(val).focus(); 
    input[0].selectionStart = input[0].selectionEnd = lastPoint; 
}); 

我已經把輸入的最大長度至10，但我到達後，我仍然能夠使用輸入字符附加/特殊符號按鈕。

Updated Fiddle

Answer 1

使用此

<input id="field" type="text" maxlength="10" /> 

jQuery的

$('#field').keypress(function (event) { 
    if ($('#field').val().length <= 10) { 

     if (event.keyCode != '110' && event.charCode != '46') { 
      $('#field').attr('maxlength', '09'); 
     } else if (event.keyCode == '110' || event.charCode == '46') { 
      $('#field').attr('maxlength', '11'); 
     } 
    } 
});