Question

我喜欢Firefox中的选项，你单击CSS属性并将其转换为输入字段，将光标放在其中一个值上并点击↑或↓更改值+1或+1（保持shift为+10或-10）。

我对如何在jquery中执行此类实现非常感兴趣。使用<input>字段可能更容易，因为这是一个单行。但我也希望看到这个＆＃34;功能＆＃34;在<textarea>已应用，多行。显然需要另一个快捷方式，因为↑或↓会跳到下一行。我建议 ALT↑和 ALT↓。

示例（说清楚）：我们有输入This is value 12 that you can change.现在用户将光标放在12并点击快捷方式，然后转到{{1 }}

A - 我们如何使用jquery来应用＆＃34; value-up-down-feature＆＃34;在输入字段？

B - 我们如何使用jquery来应用＆＃34; value-up-down-feature＆＃34;在textareas？

有这么多用例（通过使用jquery）！

实现的想法：我认为首先我们必须检查快捷方式，如果看起来我们需要光标位置，那么我们需要提取光标周围的文本并查看它是否是一个数字，然后我们需要增加/减少这个数字并将其写回这个位置。

Answer 1

我最近对另一个问题（https://stackoverflow.com/questions/32411739/a-customised-number-input-in-html/32412318?noredirect=1#comment52802882_32412318）进行了类似的控制，所以我只是根据您的需要更新了脚本：

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;
    }
});

请注意，我没有为文本区域执行此操作，我相信您可以自己解决，因为它只是在onkeyUp / Down事件中检查修饰符（Alt = keyCode 18）。

Answer 2

您必须使用 window.getSelection（）和JS 范围方法来获取用户选择的文本，然后您可以更改它处理按键事件...

我希望你能发现这些链接很有用：

Get the Highlighted/Selected text

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

How to get selected text in textarea?

所有我对它的了解，因为从未真正使用它。祝你好运：）

Answer 3

所以我没有编写代码，但这是我将如何尝试构建上面的CSS示例。我们知道css margin属性是certian格式。该格式是由空格分隔的4个整数。所以有了这些知识，我会想象我可以使用文本字段输入控件。每当用户与字段交互时，我都需要监听快捷键。单击快捷键时，我需要检测我在margin属性中的位置并执行我的操作。

您可以轻松地找到或编写用于轻松收听快捷方式部分的代码。至于文本输入中的字符位置，也许这个链接woild help Get cursor position (in characters) within a text Input field

Answer 4

检查以下代码。这可能会解决您的问题。要检测文本选择，请使用jCaret。

<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 });
                }
            }
        });

Jquery：在key up上增加/减少textarea中的活动数值（类似于Firefox dev）

4 个答案: