I've got an input field with a background image to separate the letters in boxes.

The problem appear when I reach the end of the input: the input view scrolls down due to the cursor position placed after the last letter.

The problem

How can I avoid the view to scroll in my inputs?

I've tried to add an "overflow:hidden" and to set a "maxlength", the problem is still there.

edit: a simple demonstration (My goal is to avoid the "move effect" when the 4th letter is entered)

I've got an input field with a background image to separate the letters in boxes.

The problem appear when I reach the end of the input: the input view scrolls down due to the cursor position placed after the last letter.

The problem

How can I avoid the view to scroll in my inputs?

I've tried to add an "overflow:hidden" and to set a "maxlength", the problem is still there.

edit: a simple demonstration (My goal is to avoid the "move effect" when the 4th letter is entered)

• javascript
• html
• css
• input
• scroll

• Possible duplicate of Prevent horizontal "scrolling" of a text input? – James Brierley Commented Nov 3, 2015 at 11:46
• Share you working/attempted code.! Let us what have done so far. this is not a proper way to ask question on Stackoverflow. – Deepak Yadav Commented Nov 3, 2015 at 11:46
• @NestorLeCastor Please add a portion of you html code buddy... so that we can guide you better... – Kailas Commented Nov 3, 2015 at 12:15
• Please write your Html and Css code so I will suggest you your answer. – Himani Trivedi Commented Nov 3, 2015 at 12:42
• 3 You could just make the input slightly wider so that there's space for the carat after the fourth character: jsfiddle/n23dfs4t/1 – Moob Commented Nov 3, 2015 at 14:37

2 Answers 2

I see 2 solutions :

CSS solution

Like said in ment, you could slightly increase the with of your input to prevent this 'jump' behavior like : width : 202px

fiddlejs

JavaScript solution

If you can't/ don't want to change the width of your input you can prevent the keypress event, then check the length of the input value. If it less than 4 add it else do nothing.

Jquery way:

var t = $('#input-form');
t.keypress( function(event){
    //Prevent the value to be added
    event.preventDefault();
    //Regex that you can change for whatever you allow in the input (here any word character --> alphanumeric & underscore)
    var reg = /\w/g;
    //retreive the key pressed
    var inputChar = String.fromCharCode(event.which);
    //retreive the input's value length
    var inputLength = t.val().length;

    if ( reg.test(inputChar) && (inputLength < 4) ) {
        //if input length < 4, add the value
        t.val(t.val() + inputChar);
    }else{
        //else do nothing
        return;
    }
});

fiddlejs

Pure JavaScript:

var t = document.getElementById('input-form');

t.addEventListener('keypress', function(event){
    //Prevent the value to be added
    event.preventDefault();
    //Regex that you can change for whatever you allow in the input (here any word character --> alphanumeric & underscore)
    var reg = /\w/g;
    //retreive the input's value length
    var inputChar = String.fromCharCode(event.which);
    //retreive the input's value length
    var inputLength = t.value.length;
    if ( reg.test(inputChar) && (inputLength < 4) ) {
        //if input length < 4, add the value
        t.value = t.value + inputChar;
    }else{
        //else do nothing
        return;
    }
});

fiddlejs

I've made a small alteration to your field width in your CSS code, see below:

input {
width: 205px;
height: 50px;
font-size: 30px;
font-family: "Courier", monospace;
letter-spacing: 28px;
text-indent: 18px;
position: fixed;
padding: 0;
margin: 0;
white-space: nowrap;
overflow: hidden;

}

Try typing something now and keep an eye on the fourth character.

Hope this helps.

Sohail.