Rectangle 27 4

slice
<input type="button"
  onclick="$('#filledInput').val($('#fillingInput').val().slice(0,5));"/>

i want the fillingInput as common input for multiple filledInputs which are having various maxlengths. looking for a little more generic way.

Then grab the maxlength attribute value and put it in as the second parameter to slice. There's a bit of duplication, but that's because JS does not have to obey the value length restriction, you need to put it in explicitly.

javascript - maxlength not working if value is set from js code - Stac...

javascript jquery html maxlength
Rectangle 27 1

substring()
<input type="button" id="add" />
$('#add').click(function(){
   var str=$('#fillingInput').val();
   if(str.length > 5) {
      str = str.substring(0,5);

  }
   $('#filledInput').val(str);
 });

it is recommended not to use inline javascript.

for single element its ok. if i am having 100s of filledInputs with various maxlengths, this seems little costly for me.

hmmm... ya .. in that sace you need to create a function and call that function instead.. though this doesn't reduce your work.. are you using jquery validator to validate ??

javascript - maxlength not working if value is set from js code - Stac...

javascript jquery html maxlength
Rectangle 27 1

$(document).ready(function () {
$('#add').click(function () {
    var str = $('#fillingInput').val();
    if (str.length > 5) {
        str = str.substring(0, 5);
        $('#filledInput').val(str);
    }

   });
});

javascript - maxlength not working if value is set from js code - Stac...

javascript jquery html maxlength
Rectangle 27 2

max
<input type="number" max="99999" />
<form id='FormValidation'>
<input id="myNum" type="number" min="1" max="99999" />
<input type="text"  maxlength="5" />
    <input type="submit" />
</form>

Try adding a number greater than 99999 and hitting submit, check the updated fiddle.

$('#myNum').keyup( function(e){
    var max = $('#myNum').attr('max').length;
    if ($(this).val().length >= max) { 
        $(this).val($(this).val().substr(0, max));
    }
});

Please see this fiddle...jsfiddle.net/760j75bk in input type text, it wont allow to type more than 5 characters but in input type number, it is not...

in input type text, it stops typing after you entered the 6th character right? I need the same to be applied to input type number..

@UIDesigner Be aware that input event not supported for all browsers goo.gl/JBd9v6

javascript - maxlength=5 not working if input type=number - Stack Over...

javascript html html5 maxlength
Rectangle 27 28

<input class="required" id="field" type="text" maxlength="3" pattern="([0-9]|[0-9]|[0-9])" name="cvv"/>

and then in JavaScript I prevented the letters:

$("#myField").keyup(function() {
    $("#myField").val(this.value.match(/[0-9]*/));
});

I think you can use [0-9]{3} instead of [0-9][0-9][0-9] in your pattern (I know it works in Chrome at least).

This is nice in iOS but on android the keyboard still shows up as text, not numbers.

inputmode=numeric

the spec is idiotic, the fact that we need to change from type="number" to type="text" with pattern and javascript is ridiculous

Remove the pattern attribute if you are going to use the javascript code.

html5 - why is not working in Safa...

html5 safari maxlength
Rectangle 27 28

<input class="required" id="field" type="text" maxlength="3" pattern="([0-9]|[0-9]|[0-9])" name="cvv"/>

and then in JavaScript I prevented the letters:

$("#myField").keyup(function() {
    $("#myField").val(this.value.match(/[0-9]*/));
});

I think you can use [0-9]{3} instead of [0-9][0-9][0-9] in your pattern (I know it works in Chrome at least).

This is nice in iOS but on android the keyboard still shows up as text, not numbers.

inputmode=numeric

the spec is idiotic, the fact that we need to change from type="number" to type="text" with pattern and javascript is ridiculous

Remove the pattern attribute if you are going to use the javascript code.

html5 - why is not working in Safa...

html5 safari maxlength
Rectangle 27 1

<input type="number" min="0" max="99"/>

would work perfectly for web browsers.

<input type="tel" ng-model="value"/>

has to be used, this gives a keyboard with Numbers and Symbols.

Leveraging the concept of $watch in angularjs both the maximum limit and input type as number can be achieved.

If the new value length is more than 2 then value of text field is set to old value

$scope.$watch('value', function(newVal, oldVal) {
   if(newVal.length > 2) {       
      $scope.value = oldVal;
   }
}

Following is the regular expression for integers

var onlyNumbers = /^\d+$/;

If the new Value matches the regular expression then it returns an array or else null. If the return type is null then value of text field is set to old value

var r = newVal.match(onlyNumbers);
    if(r===null){
      $scope.value = oldVal;
    }

The full solution is contained in the plunker link below:

The input type="tel" works with the max length. But We want the solution for the input type="number". And here the maxlength is not getting applied.

javascript - Cordova Input type number maxlength not working in androi...

javascript jquery angularjs html5 cordova
Rectangle 27 1

maxlength
max
// Max Length = 5
<input type="number" max="99999" />
// length between 1 to 5
<input type="number" min="1" max="99999" />
<input type="number" min="1" max="10000" />

No. I 'm asking the length not not the limit..there is a difference between length and limit

(function ($) {
    $.fn.maxlength = function (length) {
        return this.on('keydown', function () {
            var maxlength = length || parseInt($(this).attr('maxlength'), 10) ;
            if (maxlength && $(this).val().length >= maxlength) {
                $(this).val($(this).val().slice(0, maxlength - 1));
            }
        });
    };
}($));

Please see this fiddle...jsfiddle.net/760j75bk in input type text, it wont allow to type more than 5 characters but in input type number, it is not... it stops typing after you entered the 6th character right?

Appreciate your work +1 ..This will work in mobile? Because you have used keypress right?

Why should you use type="Number" if you have to type using keyboard than take it type='text'......if number than see attached arrow increment it's go on 999... Using JQuery you do that things

javascript - maxlength=5 not working if input type=number - Stack Over...

javascript html html5 maxlength
Rectangle 27 1

This problem probably is a bug in Android 4.1 version as you can see here 35264. You can solve that with some Javascript:

<input type="text" maxlength="3" id="hahaha" onkeypress="if(this.value.length >= this.getAttribute('maxlength') return false;" />
$(function() {
    max_length = $("#hahaha").attr("maxlength");
    $("#hahaha").attr("onkeypress", "if(this.value.length >= max_length) return false;");
});

Dear @neliojrr onkeypress event is not getting fired, in android browser

keyup
substr

javascript - maxlength of input tag with type=text using html5 in andr...

javascript jquery html5 webview
Rectangle 27 1

This problem probably is a bug in Android 4.1 version as you can see here 35264. You can solve that with some Javascript:

<input type="text" maxlength="3" id="hahaha" onkeypress="if(this.value.length >= this.getAttribute('maxlength') return false;" />
$(function() {
    max_length = $("#hahaha").attr("maxlength");
    $("#hahaha").attr("onkeypress", "if(this.value.length >= max_length) return false;");
});

Dear @neliojrr onkeypress event is not getting fired, in android browser

keyup
substr

javascript - maxlength of input tag with type=text using html5 in andr...

javascript jquery html5 webview
Rectangle 27 1

<input type="number" id="nbr"/>

<input type="text"  maxlength="5" />

$(document).on('keypress','#nbr', function(e){
if($(this).val().length >= 5)
   {
       e.preventDefault();
   }

});

javascript - maxlength=5 not working if input type=number - Stack Over...

javascript html html5 maxlength
Rectangle 27 2

dojo.attr(el,"maxLength",'2499');

I tried it.But still the text I populate is still showing 2501 characters.I copied it and pasted in textarea to populate,I am guessing it is because of UTF-8 characters

javascript - Textarea maxlength value not working - Stack Overflow

javascript html dojo textarea maxlength
Rectangle 27 1

<textarea ... /></textarea>
<textarea ... ></textarea>
<div>
  <textarea maxlength="1000" 
            rows="5"
            cols="5" 
            style="width: 398px; height: 175px;overflow: auto; padding: 4px !important"              
name="body" 
            id="body" 
            onkeypress="imposeMaxLength(this, 10);"
            onpaste="imposeMaxLength(this, 10);" >
    </textarea>
</div>

<script type="text/javascript">
function imposeMaxLength(field, MaxLen){
    if (field.value.length > (MaxLen-1)) {
        alert("It cannot exceed " + MaxLen + " characters.");
        field.value = field.value.substr(0, (MaxLen));
   }
}
</script>

which browser are you using ?

javascript - onkeypress event not working in firefox ? how to fix it? ...

javascript
Rectangle 27 3

The straightforward ways like using "pattern" and "inputmode" not working in Android nor IOS, so I emplemented the below workaround using CSS, and JavaScript.

<div>
  <input type="password" class="form-control ng-valid-minlength ng-valid-pattern ng-dirty ng-valid ng-valid-required" id="pass" name="pass" data-ng-minlength="4" maxlength="4"  tabindex="-1">
  <input type="tel" class="form-control ng-valid-minlength ng-dirty ng-valid ng-valid-required" id="passReal" name="passReal" required="" data-ng-minlength="4" maxlength="4" data-display-error-onblur="" data-number-mask="telephone"
         tabindex="5">
</div>
$().ready(function(){
var xTriggered = 0;
$( "#passReal" ).keyup(function( event ) {
  $('#pass').val($('#passReal').val());
  console.log( event );
});
$( "#pass" ).focus(function() {
  $('#passReal').focus();
});

  });
input#passReal{
  width:1px;
  height:10px;
}
input#pass {
    position: absolute;
left:0px;
}

html - Make Input Type="Password" Use Number Pad on Mobile Devices - S...

html mobile input passwords numbers
Rectangle 27 108

window.onload = function() { 
  var txts = document.getElementsByTagName('TEXTAREA'); 

  for(var i = 0, l = txts.length; i < l; i++) {
    if(/^[0-9]+$/.test(txts[i].getAttribute("maxlength"))) { 
      var func = function() { 
        var len = parseInt(this.getAttribute("maxlength"), 10); 

        if(this.value.length > len) { 
          alert('Maximum length exceeded: ' + len); 
          this.value = this.value.substr(0, len); 
          return false; 
        } 
      }

      txts[i].onkeyup = func;
      txts[i].onblur = func;
    } 
  };

}

Josh it seems it will work but will u please explain what this thing will do --- if(/^[0-9]+$/.test(txts[i].getAttribute("maxlength"))) { ---

I think I remember what the deal is: either FF or IE (I think it's FF) returns a different string when Javascript checks the "value" attribute than what it sends back to the server when the form is posted! It has something to do with how hard line breaks do/don't get a carriage return character inserted. It's easy to figure out with some debug code on the client and server sides.

I switched the order of the alert and the value truncate - in the original order, the onkeyup would alert, causing the control to lose focus and the onblur to fire since the field had not been truncated yet.

@JoshStodola - onblur will not handle the paste until the user clicks out of the textarea. onkeyup will not handle the paste if it is done through a context menu or a browser menu. This approach works if you do not need to screen for paste. See this answer for a timer based approach stackoverflow.com/a/10390626/1026459

@JoshStodola - Indeed you cannot. It would really annoy me as a user if I had pasted a whole piece of something in a textarea, clicked submit, and only saw a small portion of it go through without any response.

How to impose maxlength on textArea in HTML using JavaScript - Stack O...

javascript html textarea
Rectangle 27 108

window.onload = function() { 
  var txts = document.getElementsByTagName('TEXTAREA'); 

  for(var i = 0, l = txts.length; i < l; i++) {
    if(/^[0-9]+$/.test(txts[i].getAttribute("maxlength"))) { 
      var func = function() { 
        var len = parseInt(this.getAttribute("maxlength"), 10); 

        if(this.value.length > len) { 
          alert('Maximum length exceeded: ' + len); 
          this.value = this.value.substr(0, len); 
          return false; 
        } 
      }

      txts[i].onkeyup = func;
      txts[i].onblur = func;
    } 
  };

}

Josh it seems it will work but will u please explain what this thing will do --- if(/^[0-9]+$/.test(txts[i].getAttribute("maxlength"))) { ---

I think I remember what the deal is: either FF or IE (I think it's FF) returns a different string when Javascript checks the "value" attribute than what it sends back to the server when the form is posted! It has something to do with how hard line breaks do/don't get a carriage return character inserted. It's easy to figure out with some debug code on the client and server sides.

I switched the order of the alert and the value truncate - in the original order, the onkeyup would alert, causing the control to lose focus and the onblur to fire since the field had not been truncated yet.

@JoshStodola - onblur will not handle the paste until the user clicks out of the textarea. onkeyup will not handle the paste if it is done through a context menu or a browser menu. This approach works if you do not need to screen for paste. See this answer for a timer based approach stackoverflow.com/a/10390626/1026459

@JoshStodola - Indeed you cannot. It would really annoy me as a user if I had pasted a whole piece of something in a textarea, clicked submit, and only saw a small portion of it go through without any response.

How to impose maxlength on textArea in HTML using JavaScript - Stack O...

javascript html textarea
Rectangle 27 79

I know you want to avoid jQuery, but as the solution requires JavaScript, this solution (using jQuery 1.4) is the most consise and robust.

Inspired by, but an improvement over Dana Woodman's answer:

Changes from that answer are: Simplified and more generic, using jQuery.live and also not setting val if length is OK (leads to working arrow-keys in IE, and noticable speedup in IE):

EDIT: Updated version for jQuery 1.7+, using on instead of live

// Get all textareas that have a "maxlength" property. Now, and when later adding HTML using jQuery-scripting:
$('textarea[maxlength]').on('keyup blur', function() {
    // Store the maxlength and value of the field.
    var maxlength = $(this).attr('maxlength');
    var val = $(this).val();

    // Trim the field if it has content over the maxlength.
    if (val.length > maxlength) {
        $(this).val(val.slice(0, maxlength));
    }
});

Nice Eirik, like the use of live (forgot about it!).

I found bugs in live() and jQuery have since deprecated it. Use on() instead. If you care why: britishdeveloper.co.uk/2012/04/

But if they edited in the middle, this will kill the last character, not the new character, right?

Yep used on() and it works like a gem. THanks. here's a modified and tweaked slightly fiddle: jsfiddle.net/nXMqc

Problem with slicing is that if you enter characters to the middle, they are inserted and the string is cut from end. If the whole text is not visible at once, this can be confusing. Also using the val(..) function to change the value seems to move the cursor to the end of the string. (if you want to test these with modern browser in fiddle, you need to remove the maxlength attribute - otherwise the browser will enforce the limit).

How to impose maxlength on textArea in HTML using JavaScript - Stack O...

javascript html textarea
Rectangle 27 79

I know you want to avoid jQuery, but as the solution requires JavaScript, this solution (using jQuery 1.4) is the most consise and robust.

Inspired by, but an improvement over Dana Woodman's answer:

Changes from that answer are: Simplified and more generic, using jQuery.live and also not setting val if length is OK (leads to working arrow-keys in IE, and noticable speedup in IE):

EDIT: Updated version for jQuery 1.7+, using on instead of live

// Get all textareas that have a "maxlength" property. Now, and when later adding HTML using jQuery-scripting:
$('textarea[maxlength]').on('keyup blur', function() {
    // Store the maxlength and value of the field.
    var maxlength = $(this).attr('maxlength');
    var val = $(this).val();

    // Trim the field if it has content over the maxlength.
    if (val.length > maxlength) {
        $(this).val(val.slice(0, maxlength));
    }
});

Nice Eirik, like the use of live (forgot about it!).

I found bugs in live() and jQuery have since deprecated it. Use on() instead. If you care why: britishdeveloper.co.uk/2012/04/

But if they edited in the middle, this will kill the last character, not the new character, right?

Yep used on() and it works like a gem. THanks. here's a modified and tweaked slightly fiddle: jsfiddle.net/nXMqc

Problem with slicing is that if you enter characters to the middle, they are inserted and the string is cut from end. If the whole text is not visible at once, this can be confusing. Also using the val(..) function to change the value seems to move the cursor to the end of the string. (if you want to test these with modern browser in fiddle, you need to remove the maxlength attribute - otherwise the browser will enforce the limit).

How to impose maxlength on textArea in HTML using JavaScript - Stack O...

javascript html textarea
Rectangle 27 17

The maxlength attribute is not standard for <textarea> in HTML 4.01. It is defined in HTML5 though but I guess IE doesn't implement it. To make it work across all browsers you could use javascript. Here's an example.

@Sharon, IE10 is not RTM yet.

Yes it does work in IE10+. Only IE9 and less is an issue. It is a very good solution for the problem!!!

html - Maxlength for text area doesn't work in IE - Stack Overflow

html asp.net-mvc-3
Rectangle 27 17

The maxlength attribute is not standard for <textarea> in HTML 4.01. It is defined in HTML5 though but I guess IE doesn't implement it. To make it work across all browsers you could use javascript. Here's an example.

@Sharon, IE10 is not RTM yet.

Yes it does work in IE10+. Only IE9 and less is an issue. It is a very good solution for the problem!!!

html - Maxlength for text area doesn't work in IE - Stack Overflow

html asp.net-mvc-3