Question

This jquery code below is for a text input box to help users enter times in a formatted way.

I have tested it on here

http://jsfiddle.net/nNpjm/2/

I am now wanting to include it in my html form now however I do not know where it would go?

Should it go in the onchange tag?

input.click(function() {

        $(this).prop({
            selectionStart: 0, //moves cursor to poition zero in input box
            selectionEnd: 0
        });

    }).keydown(function() {

        var sel = $(this).prop('selectionStart'),
            val = $(this).val(),
            newsel = sel === 2 ? 3: sel;
            newsel = sel === 5 ? 6: newsel;

        $(this).val(val.substring(0, newsel) + val.substring(newsel + 1))

        .prop({
            selectionStart: newsel,
            selectionEnd: newsel
        });
    });

Thanks

Answer 1

To get the ball rolling you can simply place the javascript below your form on the same page. You’ll eventually want to place all your javascript in external .js files and include them via <script src="my_javascript_file.js"></script>

I’ve included your script below. You’ll notice that it’s wrapped in CDATA tags – this is a fail-safe to handle an XHTML doctype so that the XML parser ignores the script completely and does not fail when it encounters unfamiliar characters:

<form id="form" method="post" action="whatever.html">
    <!-- additional fields, submit button, etc -->
</form>
<script type="text/javascript">
/* <![CDATA[ */
    var input = $("<input>", { //this bit will be removed in the form
        name: 'time',
        val: '00:00:00',
        maxlength: '8',
        size: '5'
    });

    input.click(function() {

        $(this).prop({
            selectionStart: 0,
            selectionEnd: 0
        });

    }).keydown(function() {

        var sel = $(this).prop('selectionStart'),
            val = $(this).val(),
            newsel = sel === 2 ? 3: sel;
            newsel = sel === 5 ? 6: newsel;

        $(this).val(val.substring(0, newsel) + val.substring(newsel + 1))

        .prop({
            selectionStart: newsel,
            selectionEnd: newsel
        });
    });

    $(function(){
        $('#form').append(input);
    });

/* ]]> */
</script>