Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.12.2014, 21:40
Новичок на форуме
Отправить личное сообщение для jonrut Посмотреть профиль Найти все сообщения от jonrut
 
Регистрация: 21.11.2014
Сообщений: 6

onkeyup, input суши
Привет!
Помогите разобраться с onkeyup для мини-игрушки. Есть поле ввода input.
Есть массив с 20 названиями суши. В папке лежит 20 изображений.
Человек вводит название в input, например "Футомаки".
onkeyup должен сработать после ввода последней буквы "и", отобразить цветную картинку с суши "Футомаки" на общей черно-белой картинке, которая загружена по умолчанию на странице. Причем каждой картинке нужно задавать позицию для отображения. После загрузки картинки поле input должно очиститься и быть готовым к вводу новых названий. В идеале нужно создать массив, куда будут закидываться правильные ответы. Как лучше это сделать? Хотя-бы на примере массива из двух вариантов, подскажите, пожалуйста.
Ответить с цитированием
  #2 (permalink)  
Старый 23.12.2014, 21:58
Профессор
Посмотреть профиль Найти все сообщения от krutoy
 
Регистрация: 09.11.2014
Сообщений: 610

<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>

Последний раз редактировалось krutoy, 23.12.2014 в 22:11.
Ответить с цитированием
  #3 (permalink)  
Старый 23.12.2014, 22:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052

jonrut,
по onkeyup проверить if(value == "Футомаки"){value = "" ; и прочее}
Ответить с цитированием
  #4 (permalink)  
Старый 23.12.2014, 22:14
Аватар для Safort
Профессор
Отправить личное сообщение для Safort Посмотреть профиль Найти все сообщения от Safort
 
Регистрация: 23.12.2013
Сообщений: 1,856

Автор, с тебя футомаки.

<!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>
Ответить с цитированием
  #5 (permalink)  
Старый 23.12.2014, 22:15
Аватар для Safort
Профессор
Отправить личное сообщение для Safort Посмотреть профиль Найти все сообщения от Safort
 
Регистрация: 23.12.2013
Сообщений: 1,856

Можно ещё хэши использовать вместо двух массивов, но это уже сам решай.
Ответить с цитированием
  #6 (permalink)  
Старый 23.12.2014, 22:17
Профессор
Посмотреть профиль Найти все сообщения от krutoy
 
Регистрация: 09.11.2014
Сообщений: 610

рони,
Я как то раз пробовал кейап, кейдаун, и прочее, и заметил, что он медленней онинпута раз в 100, наверное. Нахрен они нужны вообще?
Ответить с цитированием
  #7 (permalink)  
Старый 23.12.2014, 22:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052

krutoy,
молодец, возьми с полки пирожок!
Ответить с цитированием
  #8 (permalink)  
Старый 23.12.2014, 22:23
Профессор
Посмотреть профиль Найти все сообщения от krutoy
 
Регистрация: 09.11.2014
Сообщений: 610

рони,
Не, я серьезно. Может я че не так делаю? Я понимаю, когда нужен именно онкейап, без него -- никак, но таких случаев -- раз два и обчелся. А в общем случае, нафига его пльзовать? Или я ошибся со скоростью? Может не в кейап/кейдаун было дело? Тонкости может какие? Я серьезно спрашиваю.
Ответить с цитированием
  #9 (permalink)  
Старый 23.12.2014, 22:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052

krutoy,
всё нормально, расслабьтесь. oninput подходит для решения этой задачи.
Ответить с цитированием
  #10 (permalink)  
Старый 24.12.2014, 00:35
Новичок на форуме
Отправить личное сообщение для jonrut Посмотреть профиль Найти все сообщения от jonrut
 
Регистрация: 21.11.2014
Сообщений: 6

Всем спасибо!
Safort, спасибо, работает. Вот только подскажите, пожалуйста, как сделать так, чтобы бекграунд не заменялся новой картинкой, а происходило накладывание на закрепленный bg? На странице есть поле ввода и под ним bg, допустим, 1000px на 600px. Черно-белая. При вводе в input названия суши, которое человек угадывает по чернобелой картинке должна подгрузится маленькая картинка, но уже цветная, поверх ч/б с отступами, допустим, (left:20, top: 40).
Нужно ли массив создавать с картинками? Или отдельно массив, где будут координаты прописаны для каждой цветной мини-картинки? Спасибо.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ширина поля input text в зависимости от количества символов rekon87 (X)HTML/CSS 7 14.06.2013 22:55
При добавлении DOCTYPE "плывут" размеры input type=text Demath (X)HTML/CSS 4 08.07.2012 19:27
Opera не выполняет style.fontSize=... в поле input Маэстро Opera, Safari и др. 6 20.06.2011 12:03
Копирование из одного input в другой input bar-boss Общие вопросы Javascript 7 08.04.2008 19:10
Разным элементам input - разное форматирование. Как? eclipse (X)HTML/CSS 1 25.10.2007 13:55