limit imput length to max 10 chars

Question

I try to limit a form of input to 10 chars

var max_chars = 10;

$('input#ctl00$bc$custom_element_44').keydown( function(e){
    if ($(this).val().length >= max_chars) { 
        $(this).val($(this).val().substr(0, max_chars));
    }
});

$('input#ctl00$bc$custom_element_44').keyup( function(e){
    if ($(this).val().length >= max_chars) { 
        $(this).val($(this).val().substr(0, max_chars));
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<input name="ctl00$bc$custom_element_44" type="text" id="ctl00_bc_custom_element_44">

But it does not seem to work, advice is sought;)

Regards Pete

`$('input#ctl00$bc$custom_element_44')` this ID is wrong. You need `$('#ctl00_bc_custom_element_44')`. — evolutionxbox, Jun 06 '17 at 12:25
@evolutionxbox is right, you're targetting the `name` attribute instead of the `id` attribute. — Dieterg, Jun 06 '17 at 12:26
Possible Duplicate: https://stackoverflow.com/questions/8545376/limit-number-of-characters-allowed-in-form-input-text-field — Rajesh, Jun 06 '17 at 12:26
@trincot mark dupe only covers JS ways and is not exact dupe. Please see dupe in my previous comment — Rajesh, Jun 06 '17 at 12:27

score 5 · Accepted Answer · answered Jun 06 '17 at 12:28

5

Simplest approach, vanilla JavaScript. JSFiddle.

JS:

let name = document.getElementById('name');

name.addEventListener('keyup', () => {
    if (name.value.length > 10) {
        name.value = name.value.slice(0, 10);
    }
})

HTML:

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

answered Jun 06 '17 at 12:28

Lansana Camara

9,497
11
47
87

1

thanks, works perfect – peter Jun 06 '17 at 12:34
Sure! I'll leave it as an exercise to you to convert it to jQuery if that's what you want to use. Should be more or less the same, just changing syntax. – Lansana Camara Jun 06 '17 at 12:36

score 2 · Answer 2 · answered Jun 06 '17 at 12:24

2

You can use native maxlength attribute on the input tag.

<input name="ctl00$bc$custom_element_44" type="text" id="ctl00_bc_custom_element_44" maxlength="10">

answered Jun 06 '17 at 12:24

Thomas Orlita

1,554
14
28

Thanks, but I can not edit directly in the input field – peter Jun 06 '17 at 12:27

score -3 · Answer 3 · answered Jun 06 '17 at 12:55

Use below code

or use max length with input tag

limit imput length to max 10 chars

3 Answers3