Javascript 基于值在文本框下添加文本

我有一个文本字段，我想根据输入在这个文本字段下面放置信息。例如，假设某人键入abc，那么我希望文本字段下面的一些文本显示foo_abc。jquery是实现这样的事情的最佳方式吗？此外，我在文本字段上方有一个下拉列表，希望根据所选内容将信息附加到文本字段下方的标签。这可能吗？

阅读javascript事件

---

一旦您熟悉了基本知识，那么就阅读jquery，让您的生活更轻松。

这可以通过使用或不使用jquery来完成。像jQuery这样的JS框架可以使您的代码更整洁、更短，以完成您所指的任务。但是如果没有它，您可以使用文本字段的“onkeyup”事件来触发更新文本字段下文本的JS函数。此外，下拉框的“onchange”事件也可以执行相同的操作。getElementById（）允许您通过标记的id属性直接获取文档中的元素

我编了一个例子。请看这里：

---

我建议您阅读jQuery文档，这里有很多示例，您不需要jQuery来做，只需要就可以了，下面我们来看看普通JavaScript：

<script>        
    // Just an easier way to get an 
    // element by id in the document.
    function $get(id) {
        return document.getElementById(id);
    }    

    // This is what's called whenever
    // the user types into the input
    // box or changes the select value
    function config(event) {
       var prepend = "foo_",
           msgbox = $get("msgbox"),
           input = $get("input"),
           append = $get("selector");

        // Just a shorthand for an "if(){}else{}" 
        // statement. If input is blank, don't do
        // anything but clear the msgbox.
        (input.value) ? msgbox.innerHTML = prepend + input.value + append.value :
        msgbox.innerHTML = "";

    }    

    // Although this should probably
    // be at the top, it's better if
    // we declare everything before
    // we try to call them. ;)
    window.onload = function(event) {  
        // On load of the window, lets add
        // event listeners to our input
        // and selector box.

        // Input
        this.input = $get("input");
        this.input.addEventListener('change', config, false);
        this.input.addEventListener('keyup', config, false);

        // Selector
        this.append = $get("selector");
        this.append.addEventListener('change', config, false);
    }
</script>

//这是一个更容易的方法
//在文档中按id显示元素。
函数$get（id）{
返回文档.getElementById（id）；
}    
//这就是所谓的
//用户键入输入
//框或更改选择值
函数配置（事件）{
var prepend=“foo”，
msgbox=$get（“msgbox”），
输入=$get（“输入”），
append=$get（“选择器”）；
//只是“if（）{}else{}”的简写
//语句。如果输入为空，则不执行
//除了清除msgbox之外，什么都可以。
（input.value）？msgbox.innerHTML=prepend+input.value+append.value：
msgbox.innerHTML=“”；
}    
//虽然这很可能
//在顶端，最好是
//我们以前申报过一切
//我们试着给他们打电话
window.onload=函数（事件）{
//加载窗口后，让我们添加
//事件侦听器到我们的输入
//和选择器框。
//输入
this.input=$get（“输入”）；
this.input.addEventListener（'change'，config，false）；
this.input.addEventListener（'keyup'，config，false）；
//选择器
this.append=$get（“选择器”）；
this.append.addEventListener（'change'，config，false）；
}

<div id="container">
    <input id='input' value=""/>
    <select id="selector">
        <option value="_bar1">_bar1</option>
        <option value="_bar2">_bar2</option>
        <option value="_bar3">_bar3</option>
    </select>
    <div id="msgbox"></div>
</div>

_bar1
_bar2
_bar3

---

-->更新了信息和检测事件的更好方法。：）谢谢你的帮助。我应该说得更清楚些。我只想根据用户键入的内容在文本字段下向用户显示一些文本。我已经在文本字段上使用了一些javascript，比如将文本设置为小写，并在模糊中去掉空格。我有一个名为replace（）的函数，它使用onblur事件。我能不能在那之后再加上这个，而不是进行加载？