[RPGonzo]

OK, im pretty fluent with JQuery, HTML & CSS but today i tried making a few inputs act like "lined paper".

Started small with three inputs set to a width of 1000px each with no background image and a bottom border only, thus imitating a paper look.

<style type="text/css">
input { 
 background-image: none; 
 border: medium none; 
 border-bottom: 1px solid #000000; 
 height: 22px; 
 width: 1000px; 
 overflow: hidden;
}
</style>

<input type="text" value="" class="cm1"/><br/>
<input type="text" value="" class="cm2"/><br/>
<input type="text" value="" class="cm3"/>

ok simple enough, now with some jq

<script type="text/javascript">
 // this function courtesy of a random hit googled page
    $.fn.focusNextInputField = function() {
        return this.each(function() {
            var fields = $(this).parents('form:eq(0),body').find('button,input,textarea,select');
            var index = fields.index( this );
            if ( index > -1 && ( index + 1 ) < fields.length ) {
                fields.eq( index + 1 ).focus();
            }
            return false;
        });
    };

$(document).ready(function(){
    $("input[class^=cm]").keyup(function() {
        if ($(this).val().length == $(this).attr("maxlength")) {
            var nm = $(this).attr("class").replace("cm","").replace("sw","");
            nm = parseFloat(nm) + 1;
            if (nm > 3) { return false; }
            $(this).focusNextInputField();
        }
    });
});
</script>

ok so i know this may look weird right now but my 'original' philosophy was to use a maxlength attribute on the input and when the input hit that just move to the next input. Bad thing about that is certain letters are wider than others so the text didn't always use all the space available.

BUT if I don't have the maxlength set the input just continues to accept user input, so my ultimate goal is this

1- when the user input reaches the end of the line stop accepting input and fire a "end of line" event(make believe i know)

2- When that event fires have the borrowed function in the script fire and move the focus to the next input so the user can continue inputting info

3- the method to stop the user on completeiion of the third input is already in place ... crude but it works

any ideas??? lol

[RPGonzo]

In case anyone comes across this, setting a monospaced font in the input text works with my initial counting function. And has thus solved my problem