创建一个函数来扫描用户输入

Question

我是新来的java脚本，我有一些经验，但我仍然在学习。我的问题是：“如何创建一个函数来检查特定单词的用户输入（文本），然后显示为这些特定单词设置的图像？”如前所述我是新的，所以详细的解释是有帮助的。谢谢！

Answer 1

您需要了解Event Listeners的Javascript。您可以使用它们来检测文本字段中何时输入。

Answer 2

您可以使用事件侦听器和indexOf或match方法（以及其他可能性）执行此操作。下面是使用jQuery的例子：

HTML

<input type="text" id="theInput"/> 
<div id="images"></div> 

的JavaScript

$('#theInput') 
    .on('change keyup', function() { 
     clearImages('#images'); 

     if ($(this).val().match(/smile/i)) { 
      addImage('#images', 'https://s.yimg.com/lq/i/mesg/emoticons7/1.gif'); 
     } 

     if ($(this).val().match(/cool/i)) { 
      addImage('#images', 'https://s.yimg.com/lq/i/mesg/emoticons7/16.gif'); 
     } 
    }); 

function addImage(selector, url) { 
    $(selector).append('<img src="' + url + '"/>'); 
} 

function clearImages(selector) { 
    $(selector).html(''); 
} 

如果用户输入包含文字 “微笑” 或 “酷” 这将添加的图像。 DEMO

编辑：下面是一个简单的JavaScript版本：

function addImage(selector, url) { 
    document 
     .getElementById(selector) 
     .innerHTML += '<img src="' + url + '"/>'; 
} 
function clearImages(selector) { 
    document 
     .getElementById(selector) 
     .innerHTML = ''; 
} 
function doImages() { 
    clearImages('images'); 

    if (this.value.match(/smile/i)) { 
     addImage('images', 'https://s.yimg.com/lq/i/mesg/emoticons7/1.gif'); 
    } 

    if (this.value.match(/cool/i)) { 
     addImage('images', 'https://s.yimg.com/lq/i/mesg/emoticons7/16.gif'); 
    } 
} 

var theInput = document.getElementById("theInput"); 

theInput.onchange = doImages; 
theInput.onkeyup = doImages; 

DEMO