2014-04-22 2 views
0

Я хочу div, который показывает ваш ввод, но, например, * 2.Изменить div на вход (переменная «живого» и «живого»)

Я также хочу, чтобы это произошло по мере ввода. Так что это должно быть «жить».

Я нашел много функций jQuery для «on keyup», но мне нужно изменить «переменную», которая вводится в поле ввода.

Так, например:

<input id="input" /> (types 4) 

<div class="showinputhere"> (shows 8) </div> 

Как мне это сделать, это должно произойти сразу при вводе.

+0

использование JQuery .clone – underscore

ответ

1

Используйте этот

$(document).ready(function() 
    $('input').keyup(function(){ 
     $('.showinputhere').html(parseInt($(this).val(),10) *2); 
    }); 
}); 

JSFiddle ->http://jsfiddle.net/gLExt/

+0

Спасибо! Работает отлично – Niek95

0
var input = document.getElementById("input"); 
var div = document.getElementsByClassName("showinputhere"); 
div = div[0]; 
input.addEventListener("change", function() { 
    div.innerHTML = this.value * 2; 
}) 

Это проверялось, но может работать. Вот отредактированная версия с использованием keyup, потому что мне сообщили, что изменения не обновляются автоматически.

var input = document.getElementById("input"); 
var div = document.getElementsByClassName("showinputhere"); 
div = div[0]; 
input.addEventListener("keyup", function() { 
    div.innerHTML = this.value * 2; 
}) 
+0

изменение события работает только onblur event, а не 'live' – dbucki

+0

Спасибо! Также работает! – Niek95

+0

Работает без jQuery, который всегда является лучшим методом, на мой взгляд. – ndugger

0

попробуйте следующий код:

<script> 
function calVal(inputVal){ 
     var input = document.getElementById("input"); 
     var div = document.getElementsByClassName("showinputhere"); 
     div = div[0]; 
     div.innerHTML = inputVal * 2 == 0 ? "" : inputVal * 2; 
    } 
</script> 

И вызовите функцию "OnKeyUp" событие ввода, как это:

<input id="input" onkeyup="calVal(this.value);"/> 
Смежные вопросы