改变输入值，同时仍允许用户输入 [英] Changing input value while still allowing the user to type

问题描述

是否有可能使用JavaScript或jQuery在用户输入时更改文本输入字段的内容？

例如，键入 a + up 会将 a 更改为å，同时保持输入光标位于同一位置。

解决方案

是的，立即更改并保持 selectionStart 和 selectionEnd 在上一个位置： http://jsfiddle.net/pimvdb/p2jL3/3/ 。

selectionStart 和 selectionEnd 表示选择界限，并且在没有选择时相等，在这种情况下它们表示光标位置。

编辑：决定制作一个jQuery插件，因为它稍后可能会派上用场，并且很容易以任何方式实现。

 （function（$）{
 var down = {}; //当前按下的键
 replacements = {//替换映射
 37：{//保留
'a '：'
}，
 
 38：{//增加
'a'：''
}，
 
 39：{// right 
'a'：'á'
}，
 
 40：{// down 
'a'：'à'
} 
}; 
 
 $ .fn.specialChars = function（）{
 return this.keydown（function（e）{
 down [e.keyCode] = true; //这个键是现在下降
 
 if（down [37] || down [38] || down [39] || down [40]）{//如果箭头键关闭
 var value = $（this）.val（），// textbox value 
 pos = $（this）.prop（'selectionStart'），//游标位置
 char = value.charAt（pos  -  1） ，//旧字符
替换=替换[e.keyCode] [char] || char; //新字符（如果可用）
 
 $（this）.val（value.substring（0 ，pos  -  1）//将文本设置为：字符前的文本
 +替换// +新字符
 + value.substring（pos））// +光标后的文本
 
 .prop（{selectStart：pos，//重置光标位置
 selectionEnd：pos}）; 
 
返回false; //防止开始/结束文本框
} 
}）。keyup（function（e）{
 down [e.keyCode] = false; //这个键现在没有关闭（function（）{
 down = {}; //当文本框丢失焦点时，所有的键都没有关闭
}）; 
}; 
}）（jQuery）; 
  

Is it possible, using JavaScript or jQuery, to change the content of a text input field while the user types?

E.g. typing a + up would change the a to å, while keeping the input cursor at the same position.

解决方案

Yes, change it on the fly and keep selectionStart and selectionEnd at the previous position: http://jsfiddle.net/pimvdb/p2jL3/3/.

selectionStart and selectionEnd represent the selection bounds, and are equal to each other when there is no selection, in which case they represent the cursor position.

Edit: Decided to make a jQuery plugin of it, since it may come in handy later and it's easy to implement anywhere that way.

(function($) {
    var down         = {}; // keys that are currently pressed down
        replacements = { // replacement maps
            37: { // left
                'a': 'ã'
            },

            38: { // up
                'a': 'â'
            },

            39: { // right
                'a': 'á'
            },

            40: { // down
                'a': 'à'
            }
        };

    $.fn.specialChars = function() {
        return this.keydown(function(e) {
            down[e.keyCode] = true; // this key is now down

            if(down[37] || down[38] || down[39] || down[40]) { // if an arrow key is down
                var value   = $(this).val(),                         // textbox value
                    pos     = $(this).prop('selectionStart'),        // cursor position
                    char    = value.charAt(pos - 1),                 // old character
                    replace = replacements[e.keyCode][char] || char; // new character if available

                $(this).val(value.substring(0, pos - 1) // set text to: text before character
                            + replace                   // + new character
                            + value.substring(pos))     // + text after cursor

                      .prop({selectionStart: pos,   // reset cursor position
                             selectionEnd:   pos});

                return false; // prevent going to start/end of textbox
            }
        }).keyup(function(e) {
            down[e.keyCode] = false; // this key is now not down anymore
        }).blur(function() {
            down = {}; // all keys are not down in the textbox when it loses focus
        });
    };
})(jQuery);

这篇关于改变输入值，同时仍允许用户输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！