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的手机触摸输入框来更改背景颜色

回答

相关问题