How to prevent move to end of line glitch in input

Question

This is what I'm working with:

<input id="t78" name="9x6" size="4" spacename="nospacezone" style="font-size: 0.6em" type="text" value="${9x6}" />

//this removes spaces and replaces them with hyphens
$(function () {
    $("input[spacename^='nospacezone']").bind('input', function () {
        $(this).val(function (_, v) {
            return v.replace(/\s+/g, '-');
        });
    });
});

If you put those things into JSFiddle, add the jquery library, and run it you'll see that if you click on the text inside the input box and type a letter or erase a letter, the pointer jumps to the end of the text. I don't know why it does this but I would like it to stop. Please let me know if you have any suggestions! Thank you!