jquery移动触摸输入框更改背景颜色答案

【问题标题】：jquery mobile touch input box to change background colorjquery移动触摸输入框更改背景颜色
【发布时间】：2013-05-14 04:47:52
【问题描述】：

我正在使用jquery mobile，我只想在输入框被触摸并且用户键入要删除背景颜色的文本时更改输入框的背景颜色。到目前为止，我已经这样做了

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

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

css

.tap-button{
    background:red;}

但键入文本时背景颜色不会消失。有什么建议吗？

【问题讨论】：

分享你的示例演示
我已经添加了所有的代码。
可以调用keypress事件，改变文本框的颜色......
$("#name").click( function(event) { $(this).closest('div').addClass('tap-button'); }); 将类添加到父 div。

标签： jquery html css jquery-mobile

【解决方案1】：

要正确操作 jQuery Mobile 样式，您需要了解 JQM 在插入 DOM 后如何呈现/增强 HTML 标记。

要更改input 的背景颜色，您需要使用closest 将您的样式添加到其父div。那个div是JQM在增强代码后添加的。

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>

【讨论】：

【解决方案2】：

你可以使用触摸事件

.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

【讨论】：

首先，.ready() 不应该与 jQuery Mobile 一起使用。其次，在处理 DOM 中的动态元素时，使用 .on 而不是 .bind。第三，它会部分改变输入的颜色。在您的手机上测试我的演示。