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

Question

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

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

js

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

css

.tap-button{
    background:red;}

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

Answer 1

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

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

演示

$('#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>

Answer 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');
  });
});

更新演示