Question

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

Answer 1

您可以使用事件侦听器和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('');
}

如果用户输入包含“smile”或“cool”的文本，则会添加图像。 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

Answer 2

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

创建扫描用户输入的功能

2 个答案: