Question

我正在使用jquery mobile，我只想在触摸输入框时更改输入框的背景颜色，并且当用户键入要删除背景颜色的文本时。我已经完成了这个< / p>

<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 sytles，您需要了解JQM在插入DOM后如何呈现/增强HTML标记。

要更改input的背景颜色，您需要使用div将您的样式添加到其“父closest”。在增强代码之后，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>

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

Update demo

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

2 个答案: