jQuery Set Cursor In Home Key

Question

I want after type two number in filed append / and set cursor in home.

My mean of the home is, Home key on the keyboard :

I try as: (In my code instead run Home key this adding $)

<input type="text" class="num" maxlength="2"/>

$(".num").keypress(function(e){
    var val = this.value;
    var value =  val + String.fromCharCode('36');
    (val.length == '2') ? $(this).val(value+'/') : '';
});

DEMO: http://jsfiddle.net/3ePxg/

How can done it?

it is not very clean for me what you trying to acheive. What works in your fiddle ? — zb', Dec 07 '12 at 17:00
for me it just adds $/ after i type two chars, you want to add / and place cursor to begin of string ? — zb', Dec 07 '12 at 17:02
How can you append the "/" if your input type maxlengthis 2. — mohan.gade, Dec 07 '12 at 17:07

score 0 · Answer 1 · edited May 23 '17 at 10:29

0

When 2 is entered in the input we can append / and go to the beginning (left side) of input field with this: I don't follow with the Home key -- what do you want to happen with that (if you mean put the cursor at the start of the input field look at this)? However, with the keypress event of 2 to be 2/ we can do:

$(".num").on('keypress', function(e){
    if (e.keyCode == 50) {
        var input = $(e.target);
        input.val(input.val() + '2/');
        input.focus();
        e.target.setSelectionRange(0,0);
    }
});

Demo: jsfiddle

edited May 23 '17 at 10:29

Community

1
1

answered Dec 07 '12 at 17:04

Cymen

14,079
4
52
72

No. I want to add `/` and place cursor to begin of string. – Taylor Gomez Dec 07 '12 at 17:17
@TaylorGomez Now I understand. I've updated my answer and the jsfiddle. That what you want, right? – Cymen Dec 07 '12 at 18:39
No, i want as: http://jsfiddle.net/wgLhy/4/ (In this filed you put just number) . but it is large codes, How can done it as shorthand coding? – Taylor Gomez Dec 07 '12 at 19:15

score 0 · Answer 2 · answered Dec 07 '12 at 17:33

try this:

js:

//based on script from here: http://stackoverflow.com/a/4085357/815386 -> http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea
function setCaretPosition(ctrl, pos) {
    if (ctrl.setSelectionRange) {
        ctrl.focus();
        ctrl.setSelectionRange(pos, pos);
    }
    else if (ctrl.createTextRange) {
        var range = ctrl.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
    }
}

function GetCaretPosition(ctrl) {
    var CaretPos = 0; // IE Support
    if (document.selection) {
        ctrl.focus();
        var Sel = document.selection.createRange();
        Sel.moveStart('character', -ctrl.value.length);
        CaretPos = Sel.text.length;
    }
    // Firefox support
    else if (ctrl.selectionStart || ctrl.selectionStart == '0') CaretPos = ctrl.selectionStart;
    return (CaretPos);
}

$(".num").keyup(function(e) {
    var val = this.value;
    if (val.length >= '2') {
        var value = val.substr(0, 2);
        var pos=GetCaretPosition(this);
        $(this).val(value + '/');
        setCaretPosition(this, pos);
        console.log(GetCaretPosition(this));
        if (pos >= 2) {
            setCaretPosition(this, 0);
            return false;
        }
    }
});

DEMO

What you mean by "How is it summarized?" ? About large codes... all my code and fixed your in `keyup` handler, the GetCaretPosition and setCaretPosition are 3rd party code — zb', Dec 07 '12 at 18:02

jQuery Set Cursor In Home Key

2 Answers2