События изменения текста в jquery с Asp.net - PullRequest
4 голосов
/ 01 ноября 2011

У меня есть 2 текстовых поля, и если я что-нибудь напишу в textbox1, оно должно немедленно отобразиться в textbox2, а если я напишу что-нибудь в textbox2, оно должно отразиться в textbox1.

Так как мне это сделать? Я видел эту статью раньше и как реализовать между двумя текстовыми полями?

http://www.zurb.com/playground/jquery-text-change-custom-event

Вот мои текстовые поля:

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

Ответы [ 4 ]

5 голосов
/ 01 ноября 2011
$('#TextBox1').keydown(function(){
    $('#TextBox2').val($(this).val())
})
$('#TextBox2').keydown(function(){
    $('#TextBox1').val($(this).val())
})
2 голосов
/ 01 ноября 2011
var $tbs = $("input[id^='TextBox']");
$tbs.keyup(function() {
    var that = this;
    $tbs.each(function() {
       $(this).val(that.value);
    }); 
});

Демо: http://jsfiddle.net/SGcEe/2/

1 голос
/ 01 ноября 2011

Приведенный выше способ ссылки на текстовые поля не будет работать. ASP.NET генерирует некоторый идентификатор для серверных элементов управления.

Иметь относительно чистое решение. Я бы посоветовал вам добавить классы в текстовые поля.

<asp:TextBox ID="TextBox1" CssClass="textbox1" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox2" CssClass="textbox2" runat="server"></asp:TextBox>

Код jquery будет следующим:

$('.textbox1').keyup(function() {
    $('.textbox2').val($(this).val());
});

$('.textbox2').keyup(function() {
    $('.textbox1').val($(this).val());
});

Вы можете увидеть пример использования ванильного html на jsfiddle: http://jsfiddle.net/HUFGD/

0 голосов
/ 09 октября 2012

это может быть хорошим трюком

        $("input[id*='txtQty']").keyup(function (event) {
        var oldValue = event.target.defaultValue;
        var newValue = event.target.value;
        if (jQuery.trim(newValue) == "") {
            alert("Quantity can't be empty");
            $("input[id*='txtQty']").val(oldValue);
        }
    });
...