发表新帖
发表新帖

Moving a focus when the input text field reaches a max length

前端 未结
关注
8 1431
北恋
北恋 2020-12-01 03:54

I do have a credit card number form. The number is divided into four parts just as on a real credit card.

I want to add a JavaScript taste to the form where when a u

相关标签:
8条回答
  • 孤街浪徒
    2020-12-01 04:20

    I highly recommend using the Masked Input jQuery Plugin.

    Your usage will look like this:

    $("#CreditCardNumber").mask("9999-9999-9999-9999");

    This way you'll have copy-paste and placeholder support.

    0 讨论(0)
  • 抹茶落季
    2020-12-01 04:20

    This does not have four fields, but it does validate credit cards (integrity check, not Luhn's Algorithm!). I have to tell you how annoying it is to use multiple fields for a user and auto-tabbing. I recommend you only use one field.

    From jquery website:

    $("#myform").validate({
  rules: {
    field: {
      required: true,
      creditcard: true
    }
  }
});

    /

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<script type="text/javascript">
jQuery.validator.setDefaults({
    debug: true,
    success: "valid"
});;
</script>

  <script>
  $(document).ready(function(){
    $("#myform").validate({
  rules: {
    field: {
      required: true,
      creditcard: true
    }
  }
});
  });
  </script>
  <style>#field { margin-left: .5em; float: left; }
    #field, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; }
    br { clear: both; }
    input { border: 1px solid black; margin-bottom: .5em;  }
    input.error { border: 1px solid red; }
    label.error {
        background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat;
        padding-left: 16px;
        margin-left: .3em;
    }
    label.valid {
        background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat;
        display: block;
        width: 16px;
        height: 16px;
    }
</style>
</head>
<body>

<form id="myform">
  <label for="field">Required, creditcard (try 446-667-651): </label>
  <input class="left" id="field" name="field" />
  <br/>
  <input type="submit" value="Validate!" />
</form>

</body>
</html>
    0 讨论(0)
  • 难免孤独
    2020-12-01 04:25

    I haven't used this tool before, but it does what you want. You could just look at it's source to get some ideas:

    This Plugin on GitHub

    For your situation, you would add this code:

    <script type="text/javascript" src="jquery.autotab.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#first').autotab({ target: '#second', format: 'numeric' });
    $('#second').autotab({ target: '#third', format: 'numeric', previous: '#first' });
    $('#third').autotab({ previous: '#second', format: 'numeric' });
});
</script>
    0 讨论(0)
  • 盖世英雄少女心
    2020-12-01 04:26

    If your form fields are one beside the other like in your example, you could simply take advantage of nextElementSibling and voilà!

    function skipIfMax(element) {
  max = parseInt(element.dataset.max)
  
  
  if (element.value.length >= max && element.nextElementSibling) {
    element.nextElementSibling.focus();  
  }
}
    <input type="text" data-max=2 oninput="skipIfMax(this)"/>
<input type="text" data-max=3 oninput="skipIfMax(this)"/>
<input type="text" data-max=4 oninput="skipIfMax(this)"/>
<input type="text" data-max=5 oninput="skipIfMax(this)"/>

    0 讨论(0)
  • 轮回少年
    2020-12-01 04:28

    As @Sander suggested, the easy way to do an auto-tab is:

    jQuery("form input[type=text]").on('input',function () {
    if(jQuery(this).val().length == jQuery(this).attr('maxlength')) {
        jQuery(this).next("input").focus();
    }
});

    Update by @morespace54

    oninput is an html5 event is supported on IE9+, so you can use keyup instead.

    0 讨论(0)
  • 有刺的猬
    2020-12-01 04:30

    I haven't tested it, but I think this will work. It will probably also move the focus to the button when the 4th field is completed.

    $("form input").change(function () {
    var maxLength = $(this).attr('maxlength');

    if($(this).val().length == maxLength) {
        $(this).next().focus();
    }
}
    0 讨论(0)
 看不清?
提交回复
热议问题