Jquery: Increase/decrease active number value in textarea on key up down (similar like Firefox dev)

Question

I love the option in Firefox where you click the CSS property and it turns into an input field, you put the cursor on one of the values and hit ↑ or ↓ to change the value +1 or +1 (with shift held it is +10 or -10).

I am very interested in how you do such an implementation in jquery. It might be easier to use <input> fields since this is a one-liner. But I would also like to see this "feature" in <textarea> applied, multi-lines. Obviously that needs another shortcut since ↑ or ↓ would jump into the next line. I propose ALT ↑ and ALT ↓.

Example (to make it clear): We have the input This is value 12 that you can change. Now the user puts the cursor in 12 and hits the shortcut and it turns to This is value 13 that you can change.

A - How can we use jquery to apply the "value-up-down-feature" in input fields?

B - How can we use jquery to apply the "value-up-down-feature" in textareas?

There are so many use cases when this would be available (by using jquery)!

Idea of an implementation: I think first of all we have to check for the shortcut, if it appears we need the cursor position, then we need to extract the cursor's surrounding text and see if it is a number, then we need to increase/decrease this number and write it back into this position.

Answer 1

I recently made a similar control for another question (https://stackoverflow.com/questions/32411739/a-customised-number-input-in-html/32412318?noredirect=1#comment52802882_32412318), so I simply updated the script a little for your needs:

http://jsfiddle.net/v9u0couc/6/

function createSelection(field, start, end) {
    if (field.createTextRange) {
        var selRange = field.createTextRange();
        selRange.collapse(true);
        selRange.moveStart('character', start);
        selRange.moveEnd('character', end);
        selRange.select();
    } else if (field.setSelectionRange) {
        field.setSelectionRange(start, end);
    } else if (field.selectionStart) {
        field.selectionStart = start;
        field.selectionEnd = end;
    }
}

$("input.numberControl").on("keydown", function (e) {
    var gotCode = false;
    var curPos = this.selectionStart;
    var endPos = this.selectionEnd;
    if (endPos === curPos) endPos = curPos + 1;

    // get the selected text
    var cur = $(this).val().substring(curPos, endPos);
    //check for negative numbers or comma
    if (cur == '-' || cur == '.') {
        endPos++;
        cur = $(this).val().substring(curPos, endPos);
    }
    // we are not at a number - ignore
    if (isNaN(cur) || cur.charAt(0) === ' ') {
        // search the "other" way
        endPos = curPos;
        curPos = curPos - 1;
        cur = $(this).val().substring(curPos, endPos);
    }
    if (isNaN(cur) || cur.charAt(0) === ' ' || cur === '') {
        return;
    }
    // check the chars before and after to get the "whole" number
    var start = curPos,
        end = endPos;
    while (start >= 0) {
        cur = $(this).val().substring(start, endPos);
        // found a cur that is "not" a number
        if (cur !== '-' && (isNaN(cur) || cur.charAt(0) === ' ')) {
            start++;
            break;
        }
        start--;
    }
    while (end < $(this).val().length) {
        cur = $(this).val().substring(curPos, end);
        // found a cur that is "not" a number
        if (isNaN(cur) || cur.charAt(cur.length - 1) === ' ') {
            end--;
            break;
        }
        end++;
    }
    // convert our number
    cur = Number($(this).val().substring(start, end));

    var before = $(this).val().substring(0, start);
    var after = $(this).val().substring(end);
    var origCurLen = ('' +cur).length;

    // avoid adding extra stuff 
    if (e.keyCode == 38) {

        cur++;
        $(this).val(before + '' + cur + '' + after);
        gotCode = true;
    }
    if (e.keyCode == 40) {
        cur--;
        $(this).val(before + '' + cur + '' + after);
        gotCode = true;
    }

    var field = this;
    // ignore default handling if we did something
    if (gotCode) {
        // adjust the selection
        var curLen = ('' +cur).length;
        if(curLen != origCurLen) {
            end -= origCurLen - curLen;
        } 

        window.setTimeout(function () {
            createSelection(field, start, end);
        }, 10);

        e.preventDefault();
        return false;
    }
});

Note that I didnt do it for text-area, this I am sure you can figure out for yourself, since its just another check for a modifier (Alt=keyCode 18) in an onkeyUp/Down event.

Answer 2

You have to use window.getSelection() and JS range methods to get selected text by user and then you can change it handling keypress events...

I hope you'll find these links useful:

Get the Highlighted/Selected text

How to get selected text from a text area in jquery?

How to get selected text in textarea?

All what I know about it because never really worked with it. Good luck :)

Answer 3

So i dont have the code worked out but here is how i would try to build the css example above. We know that the css margin property is in a certian format. That format being 4 integers seperated by spaces. So with that knowledge, i would imagine that i could use a text field input control. Whenever the user is interacting with the field, i would need to be listening for the shortcut key. When the shortcut key is clicked, i need to detect where i am in my margin property and perform my action.

You shoild be able to find or write the code for the listen for the shortcut part easily enough. As for the character position in a text input, maybe this link woild help Get cursor position (in characters) within a text Input field

Answer 4

Check below code. This might resolve your problem. To detect the text selection jCaret is used.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="https://jcaret.googlecode.com/files/jquery.caret.1.02.min.js"></script>

<input type="text" id="txtData" class="sensor" size="30" />
$(document).ready(function () {
        $("#txtData").keypress(function (e) {

            var selection = $(this).caret().text;
            if (selection.length > 0 && $.isNumeric(selection)) {
                var newValue;
                var flag = false;
                if (e.ctrlKey && e.keyCode == 38) {
                    newValue = parseInt(selection) + 1;
                    flag = true;
                }
                else if (e.ctrlKey && e.keyCode == 40) {
                    newValue = parseInt(selection) - 1;
                    flag = true;
                }

                if (flag) {
                    var startValue = $(this).val().indexOf(selection);
                    $(this).val($(this).val().replace(selection, newValue));
                    $(this).val($(this).val().replace(selection, newValue)).caret({ start: startValue, end: startValue + selection.length });
                }
            }
        });