CODEWITHSUNDEEP
jquery
Lynchie
Lynchie

Reputation: 1149

jQuery Strip White-space

I am not a web designer by any means, I am just attempting to make a change to something a legacy programmer put in place.

On a page the text field length is MAX 10 characters, what has happened is the source has changed the 10 character code on their page to include spaces, so customers are copying and pasting this code (including the spaces) which makes this 14 characters.

This is submitting truncated codes because people aren't paying attention (not their fault obviously).

I found some jQuery code to put in on the input on the form to strip the white-space on paste:

$(function() {
  $('#dlc_code_txtbx0').bind('input', function() {
    $(this).val(function(_, v) {
      return v.replace(/\s+/g, '');
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- This is my form field -->
<input type="text" id="dlc_code_txtbx0" name="dlc_code_txtbx0"
       class="cen" size="20" maxlength="10" placeholder="yNGsstK" />

When I copy and paste aa bb cc dd ee into the field, it removes the whitespace but still truncates the characters. Can someone please point me in the right direction?

Upvotes: 0

Views: 442

Answers (1)

Luuuud
Luuuud

Reputation: 4439

You can't add more characters then 10 because of the maxlength attribute on the input. If you'd remove that attribute, you can truncate the text in Javascript (jQuery) like so:

$(function(){
    $('#dlc_code_txtbx0').bind('input', function(){
        $(this).val(function(_, v){
            var outputValue = v.replace(/\s+/g, '');
            return outputValue.substr(0, 10); // substr will truncate the final string
        });
    });
});

Have a look at the substr() reference.

Upvotes: 2

Related Questions