自动更新输入字段的值

时间:2013-05-16 15:49:55

标签: javascript jquery

我不确定这个问题有多简单或多么复杂,因为我只是在学习javascript,但现在就去了。

说我有一个输入字段:

<input type="text" value=""/>

我正在尝试编写一个javascript函数,每次输入空格时都会检查输入值,然后在用户输入时编辑实时值。

例如,假设我开始输入:你好,你好吗

在'u'之后点击空格后,我想用'你'替换'u'。

所以,如果有人这么善良,我从哪里开始呢?这可能具有讽刺意味,因为我看到我正在键入的文本正好在这个文本区域的底部更新。但是,我试图让它在现场更新。

感谢!!!

2 个答案:

答案 0 :(得分:1)

如果您使用的是jquery,请查看:https://stackoverflow.com/a/2249215/146602

检测是否正在使用空格字符的好方法。

答案 1 :(得分:1)

你不一定需要jQuery才能做到这一点,但是使用vanilla JS需要更多的工作。首先,为您的输入提供ID:

<input id="ValueField" type="text" value="" />

然后添加一个事件监听器:

var field = document.getElementById('ValueField');

field.addEventListener('keyup',function(e){
    if(e.keyCode==32){
        // do your stuff
    }
});

有一百万种方法可以检测到变化,但首先想到的是一个功能:

var field = document.getElementById('ValueField');

field.addEventListener('keyup',function(e){
    if(e.keyCode==32){
        field.value = replaceValues(field.value);
    }
});

function replaceValues(fieldval){
    var baditems = [' u ',' i '],
        newitems = [' you ',' I '],
        length = baditems.length;

    for(var i = length; i--;){
        fieldval = fieldval.replace(baditems[i],newitems[i]);
    }

    return fieldval;
}

只需将坏项目和新项目的数组构建为与订单匹配相同的长度,您就应该做得很好。这样你可以替换你想要的任意数量的项目,并且应该很快运行。

修改

如果我有函数返回的东西可能会有帮助! Here is a jsFiddle示例。此外,我必须在ui周围添加空格,否则它只会与该字母的任何实例匹配。