jQuery val() 无法在 Chrome 中使用插入符逻辑

发布于 11-10 02:53 字数 579 浏览 1 评论 0原文

我正在使用一个已映射键码的输入字段,以便键盘输入将不同的语言字符呈现到输入字段中。

问题是,当字符到达输入“视图”的末尾时,使用 jQuery val() 方法的“映射”字符的任何附加输入都不会被解释为来自浏览器的键输入,因此始终保持最后输入的字符可见的。

所以我必须添加插入符号逻辑(jsfiddle 中的底部输入使用插入符号逻辑),但这在 Chrome/(webkit?)上不起作用

这是我的示例的 jsfiddle。 http://jsfiddle.net/dwickwire/S9EKN/

编辑:我使用以下版本进行了测试,有效在 FF 中,但在 Chrome 中不适用于我

Mac Snow Leapord OSX 10.6.7

Chrome:v 11.0.696.68、v 11.0.696.71 - 不起作用

Firefox:4.0.1 - 起作用

Windows Chrome:-v 不确定 - 不起作用

我不确定如何解决这个问题,有什么想法吗? 谢谢

I'm working with an input field which I've mapped keyCodes for so that a keyboard input will render a different language character into the input field.

The problem becomes when the characters reach the end of the input 'view' any additional input for "mapped" characters which are using the jQuery val() method will not be interpreted as a key input from the browser hence keeping the last inputted character always visible.

So I have to add caret logic (bottom input in jsfiddle uses the caret logic) but this doesn't work on Chrome/(webkit?)

Here is a jsfiddle of my example. http://jsfiddle.net/dwickwire/S9EKN/

EDIT: I tested with the following versions, works in FF but not in Chrome for me

Mac Snow Leapord OSX 10.6.7

Chrome: v 11.0.696.68, v 11.0.696.71 - don't work

Firefox: 4.0.1 - works

Windows Chrome: -v unsure - doesn't work

I'm unsure of how I can resolve this, any ideas?
Thanks

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

远昼2024-11-17 02:53:57

如果您保存并添加到输入的 scrollLeft 位置,它将更新并保持键入的字符在视图中。不过,如果您单击并在输入中间开始输入,则会失败。

我使用下面的代码更新了第二个输入 demo 。另请注意,添加的输入和测试范围应具有相同的字体大小。

input_2.bind('keydown.keyboard', function(e) {
    var key = "",
        current_val = input_2.val(),
        pos = input_2.caret(),
        start_pos = pos.start,
        end_pos = pos.end,
        scroll = $(this).scrollLeft();

    // some mapped keys
    switch (e.which) {
        // e key
    case 69:
        key = "ε";
        e.preventDefault();
        break;
        // f key            
    case 70:
        key = "φ";
        e.preventDefault();
        break;
        // z key                
    case 90:
        key = "ζ";
        e.preventDefault();
        break;
        // a key
    case 65:
        key = "α";
        e.preventDefault();
        break;
    }

    if (key !== '') {
        var test = $('<span class="test"> ' + key + '</span>').appendTo('body');
        scroll += test.width();
        test.remove();
    }

    input_2.val(current_val + key);
    //Insert/Replace text at caret then restore caret        
    input_2.value = current_val.substr(0, start_pos) + key + current_val.substr(end_pos, current_val.length);
    input_2.caret(start_pos + key.length, start_pos + key.length);
    if (key !== '') {
        $(this).scrollLeft(scroll);
    }

});

更新:scrollLeft 位置似乎有点偏离,所以如果您在带有字符的范围内添加   ,效果会更好(更新了演示

If you save and add to the scrollLeft position of the input, it will update and keep the typed character in view. Although, it fails if you click and start typing in the middle of the input.

I updated the second input demo with the code below. Also note that the input and test span that is added should have the same font size.

input_2.bind('keydown.keyboard', function(e) {
    var key = "",
        current_val = input_2.val(),
        pos = input_2.caret(),
        start_pos = pos.start,
        end_pos = pos.end,
        scroll = $(this).scrollLeft();

    // some mapped keys
    switch (e.which) {
        // e key
    case 69:
        key = "ε";
        e.preventDefault();
        break;
        // f key            
    case 70:
        key = "φ";
        e.preventDefault();
        break;
        // z key                
    case 90:
        key = "ζ";
        e.preventDefault();
        break;
        // a key
    case 65:
        key = "α";
        e.preventDefault();
        break;
    }

    if (key !== '') {
        var test = $('<span class="test"> ' + key + '</span>').appendTo('body');
        scroll += test.width();
        test.remove();
    }

    input_2.val(current_val + key);
    //Insert/Replace text at caret then restore caret        
    input_2.value = current_val.substr(0, start_pos) + key + current_val.substr(end_pos, current_val.length);
    input_2.caret(start_pos + key.length, start_pos + key.length);
    if (key !== '') {
        $(this).scrollLeft(scroll);
    }

});

Update: the scrollLeft position seemed to be a bit off, so if you add a   inside the span with the character, it works out much better (updated demo)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文