Javascript Ajax jQuery Html PHP Example Quiz New MORE

How to set max character in jQuery

❮ Previous Next ❯

Example-1

<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<textarea class="form-control"></textarea>
<span style="color:green;">Remaining Character : <span class="message">10</span></span>
<script>
$('textarea').keypress(function(e) {
    var tval = $('textarea').val(),
        tlength = tval.length,
        set = 10,
        remain = parseInt(set - tlength);
    $('.message').text(remain);
    if (remain <= 0 && e.which !== 0 && e.charCode !== 0) {
        $('textarea').val((tval).substring(0, tlength - 1))
    }
})
</script>
</body>
</html>

Example-2

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
function limitText(limitField, limitCount, limitNum) {
if (limitField.value.length > limitNum) {
limitField.value = limitField.value.substring(0, limitNum);
} else {
       $(limitCount).text(limitNum - limitField.value.length);
}
}
</script>
</head>
<body>
<p>For Text Area</p>
<form name="myform">
<textarea name="limitedtextarea" onKeyDown="limitText(this.form.limitedtextarea,'#countdown',10);"
onKeyUp="limitText(this.form.limitedtextarea,'#countdown',10);">
</textarea><br>
<font size="1">(Maximum characters: 100)<br>
You have <span name="countdown" id="countdown" size="3" value="100"> </span>characters left.</font>
</form>

<p>For Input Box</p>
<form name="myform">
<input name="limitedtextfield" type="text" onKeyDown="limitText(this.form.limitedtextfield,'#countdown1',15);"
onKeyUp="limitText(this.form.limitedtextfield,'#countdown1',15);" maxlength="15"><br>
<font size="1">(Maximum characters: 100)<br>
You have <span name="countdown" id="countdown1" size="3" > </span>characters left.</font>
</form>
</body>
</html>
❮ Previous Next ❯