Search code examples
jquerykeypreventdefault

Disable enter key if less than 2 characters in input


I have a form that only shows one question/input at a time and it uses the enter key (if pressed inside the input) to move from one question to another.

I need a way to prevent the enter key action if there are less or equal to 2 characters in the input...as a way of making sure that people actually write something in there and don't just go over them.

Here is the part of my script that involves the enter key:

triggers.first().addClass('active');
form.hide().first().show();

function sliderResponse(target) {
    form.fadeOut(500).delay(500).eq(target).fadeIn(700);
    triggers.removeClass('active').eq(target).addClass('active');
}

triggers.click(function() {
    if ( !$(this).hasClass('active') ) {
        target = $(this).index();
        sliderResponse(target);
    }
});
$('input').bind('keypress', function(e) {
    if(e.keyCode==13){
    target = $('#command ul.triggers li.active').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
    }
});

And the standard input html :

<h1>Do you have a current website?</h1>  
                    <input type="text" value="If you do, please insert the link…" id="last" name="last" class="fields" onFocus="if(this.value == 'If you do, please insert the link…') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'If you do, please insert the link…';}" />

UPDATE

This is a way to disable the enter key: But how can I make the condition of the two characters?

$("input").keypress(function (evt) {
var charCode = evt.charCode || evt.keyCode;
if (charCode  == 13) {
return false;
}
});

Solution

  • You can check the length of the value to see how many characters are inputted

    $("input").on('keydown', function(evt) {
        if (evt.which === 13 && this.value.length < 3) {
            return false;
        }
    });