Попытка добавить письмо к тексту внутри ввода

Question

У меня есть текстовый ввод, который отключен с помощью отключенного атрибута, но я добавляю к нему ввод по щелчку определенных классов.

При щелчке класса I (.I), я добавляю письмо I к существующему тексту, если таковой имеется, внутри ввода.

При щелчке класса O (.O), я добавляю букву O к существующему тексту, если таковой имеется, внутри входа.

Однако ничего не происходит, когда я нажимаю классы.

Вот мой код:

$('.I').click(function(){ 
     $('#code').text($('#code').text()+"I"); 
    }); 
    $('.O').click(function(){ 
     $('#code').text($('#code').text()+"O"); 
    }); 

Вот JSFiddel тиражирования проблемы: http://jsfiddle.net/q3xBY/

Answer 1

Чтобы получить и установить значение входного элемента, вы должны использовать .val() вместо .text().

$('.I').click(function(){ 
    $('#code').val($('#code').val()+"I"); 
}); 
$('.O').click(function(){ 
    $('#code').val($('#code').val()+"O"); 
}); 

Answer 2

Вместо жёстко каждый клик, как это, вы можете дать тот же класс для всех вашей кнопки:

<button class="I button">I</button> 
<button class="O button">O</button> 

Затем вы можете применить JQuery, чтобы достичь как то, что вы описали:

$('.button').click(function(event) { 
    var text = $(this).text(); 
    $('input:text').val(function(index, val) { 
     return val + text; 
    }); 
}); 

Updated Demo

Answer 3

Как сказал Джон С - вы захотите использовать .val(), а не .text(). Если у вас несколько экземпляров на одной странице, и вы не хотите повторять себя, я предоставил решение.

#foo - это текстовый ввод, который вы хотите изменить при нажатии на модификаторы ввода текста. ul[data-change] может быть контейнером для модификаторов и имеет атрибут data-change, чтобы указать, какой элемент input на странице будут нацелены модификаторы. Каждый из элементов-модификаторов a имеет атрибут data-value, который указывает, что будет добавлено к целевому input по адресу mouseclick.

HTML:

<input type="text" id="foo" value="" disabled="disabled" /> 
<ul data-change="#foo"> 
    <li><button id="i" data-value="i">i</button></li> 
    <li><button id="a" data-value="a">a</button></li> 
</ul> 

JS:

$('[data-change] button').on('click', function(){ 
    var target = $(this).closest('[data-change]').data('change'); 
    $(target).val($(target).val() + $(this).data('value')); 
}); 

Вот скрипку: http://jsfiddle.net/vpC6D/1/