达到maxlength后，如何限制字符输入？

Question

I have an input with special symbol button as an add-on.

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

I've put maxlength of input to 10. But after reaching I'm still able to enter characters using add-on/special symbol button.

Updated Fiddle

Answer 1

Use this

<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');
      } 
  }
});