onkeyup, input суши
Привет!
Помогите разобраться с onkeyup для мини-игрушки. Есть поле ввода input. Есть массив с 20 названиями суши. В папке лежит 20 изображений. Человек вводит название в input, например "Футомаки". onkeyup должен сработать после ввода последней буквы "и", отобразить цветную картинку с суши "Футомаки" на общей черно-белой картинке, которая загружена по умолчанию на странице. Причем каждой картинке нужно задавать позицию для отображения. После загрузки картинки поле input должно очиститься и быть готовым к вводу новых названий. В идеале нужно создать массив, куда будут закидываться правильные ответы. Как лучше это сделать? Хотя-бы на примере массива из двух вариантов, подскажите, пожалуйста. |
<html>
<head>
</head>
<body>
<script>
input=document.createElement("input")
document.body.appendChild(input)
sushi=["sushi1", "sushi2", "sushi3"]
arr=[]
doStaff=function(sushi){
arr.push(sushi) // тут непонятно, надо ли фильтровать, если слово уже в массиве
input.value=""
alert("hello "+sushi)
alert("in arr: " + arr)
// there is your code -- show picture etc
}
input.oninput=function(){
var the_sushi=sushi.indexOf(this.value)
if(the_sushi>-1) doStaff(sushi[the_sushi])
}
</script>
</body>
</html>
|
jonrut,
по onkeyup проверить if(value == "Футомаки"){value = "" ; и прочее} |
Автор, с тебя футомаки.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.bg {
background-image: url(http://th08.deviantart.net/fs5/150/i/2004/332/1/c/PIKA_by_spocha.jpg);
height: 100px;
background-size: contain;
background-repeat: no-repeat;
}
</style>
<body>
<input type="text">
<div class="bg"></div>
<script>
var words = ['футомаки', 'суперфутомаки'];
var urls = ['http://dostavka-pizza.kiev.ua/simg/136-176-home.jpg',
'http://www.food24.com.ua/imageshandler.ashx/Products/7/600/500/tnh_51b.jpg'];
var searchWord = document.querySelector('input');
var bg = document.querySelector('.bg');
searchWord.addEventListener('keyup', function() {
var indx = words.indexOf(searchWord.value);
if (indx >= 0) {
console.log(urls[indx]);
bg.style.backgroundImage = 'url(' + urls[indx] + ')';
searchWord.value = '';
}
}, false);
</script>
</body>
</html>
|
Можно ещё хэши использовать вместо двух массивов, но это уже сам решай.
|
рони,
Я как то раз пробовал кейап, кейдаун, и прочее, и заметил, что он медленней онинпута раз в 100, наверное. Нахрен они нужны вообще? |
krutoy,
молодец, возьми с полки пирожок! |
рони,
Не, я серьезно. Может я че не так делаю? Я понимаю, когда нужен именно онкейап, без него -- никак, но таких случаев -- раз два и обчелся. А в общем случае, нафига его пльзовать? Или я ошибся со скоростью? Может не в кейап/кейдаун было дело? Тонкости может какие? Я серьезно спрашиваю. |
krutoy,
всё нормально, расслабьтесь. oninput подходит для решения этой задачи. |
Всем спасибо!
Safort, спасибо, работает. Вот только подскажите, пожалуйста, как сделать так, чтобы бекграунд не заменялся новой картинкой, а происходило накладывание на закрепленный bg? На странице есть поле ввода и под ним bg, допустим, 1000px на 600px. Черно-белая. При вводе в input названия суши, которое человек угадывает по чернобелой картинке должна подгрузится маленькая картинка, но уже цветная, поверх ч/б с отступами, допустим, (left:20, top: 40). Нужно ли массив создавать с картинками? Или отдельно массив, где будут координаты прописаны для каждой цветной мини-картинки? Спасибо. |
| Часовой пояс GMT +3, время: 17:53. |