jQuery的手機觸摸輸入框來更改背景顏色

我正在使用jQuery的手機，我只想改變輸入框的背景顏色，當輸入框被觸摸，當用戶鍵入文本我想刪除背景顏色。到目前爲止我已經做到了這一點jQuery的手機觸摸輸入框來更改背景顏色

<input type ="text" id="name" placeholder="type">

$("#name").click(function(event) { 
     $(this).addClass('tap-button'); 
    });

CSS

.tap-button{ 
    background:red;}

但鍵入文字時背景顏色不起作用。有什麼建議嗎？

來源

2013-05-14 Sameertha

份額烏爾實例演示 – PraJen 2013-05-14 04:51:02

我添加了所有的代碼。 – Sameertha 2013-05-14 04:52:57

您可以調用按鍵事件並更改文本框的顏色.... – PraJen 2013-05-14 04:54:38

您可以使用觸摸事件

.tap-button{ 
    background: #004433 !important; 
}

的jQuery使用的TouchEvent

$(document).on('pageinit', '#index', function() { 
    $('#name').on('touchstart', function() { 
    $(this).addClass('tap-button'); 
    }); 
    $("#name").on('touchend', function (event) { 
    $(this).removeClass('tap-button'); 
    }); 
});

Update demo

來源

2013-05-14 05:26:44

首先，'.ready（）'不應該與jQuery Mobile一起使用。其次，在處理DOM中的動態元素時，使用'.on'而不是'.bind'。第三，它會部分改變輸入的顏色。在您的手機上測試我的演示。 – Omar 2013-05-14 07:43:55

要正確處理jQuery Mobile的sytles，你需要了解JQM如何呈現/增強HTML標記一旦插入DOM。

要更改input的背景顏色，您需要使用closest將其樣式添加到其父'div。增強代碼後，JQM添加了div。

Demo

$('#name').on('click', function() { 
$(this).closest('div').addClass('tap-button'); 
$(this).on('keypress', function() { 
    $(this).closest('div').removeClass('tap-button'); 
}); 
});

這是jQuery Mobile的是如何呈現的input：

<div class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c"> 
<input type="text" id="name" placeholder="type" class="ui-input-text ui-body-c"> 
</div>

來源

2013-05-14 07:23:31 Omar

jQuery的手機觸摸輸入框來更改背景顏色

回答

相關問題