Очистить текстовое поле в JQuery Mobile - PullRequest
Новая
       1

Очистить текстовое поле в JQuery Mobile

2 голосов
/ 01 февраля 2012

Есть ли плагин для мобильного Jquery, который позволяет очистить текстовое поле ?? Я хочу что-то вроде этого

Когда я реализую вышеприведенную демонстрацию, в текстовом поле в Jquery Mobile появляется кнопка с крестиком.

Может кто-нибудь мне помочь. Спасибо за ваше время.

мой код на данный момент 

<!DOCTYPE html> 
<html> 

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title></title> 

    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
    <script type="text/javascript" src="jquery.clearable.js"></script>
    <link rel="stylesheet" href="jquery.clearable.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />


</head> 

<body> 

<div data-role="page">

    <div data-role="header">
        <h1>Textbox Clear Demo</h1>
    </div><!-- /header -->
    <div id="content">
    <input type="text" id="clearMe"></input>

    <input type="text" id="clearYou"></input>
    </div>


    <div data-role="footer">
        <small>&#169; 2011 EyePax IT Consulting</small>
    </div><!-- /footer -->



</div><!-- /page -->
<SCRIPT>
$(document).ready(function() {
    $('#clearMe').clearable()
});
</SCRIPT>
</body>
</html>

Ответы [ 5 ]

14 голосов
/ 29 мая 2013

Старый вопрос, но кто-то спросил меня об этом сегодня.

Начиная с JQuery Mobile 1.3.0, вы можете просто добавить: 

data-clear-btn="true"

к вашему элементу управления вводом (кроме textarea), и кнопка очистки будет отображена.

См.новые документы: http://jquerymobile.com/demos/1.3.0-beta.1/docs/forms/textinputs/#

Надеюсь, это поможет любым новым пользователям!

2 голосов
/ 01 февраля 2012

Для вашей демонстрации есть учебник со всем необходимым кодом:

http://viralpatel.net/blogs/2011/02/clearable-textbox-jquery.html

Просто включите файл js , добавьте класс ко всем входам: 

<input type="text" id="clearMe" class="clearable" />

и запустите его: 

<SCRIPT>
$(document).ready(function() {
    $('.clearable').clearable()
});
</SCRIPT>
1 голос
/ 15 января 2013

Вот решение, которое я создал, посмотрите его на github На странице есть примеры, которые вы можете использовать.

1 голос
/ 01 февраля 2012

Рассматривали ли вы $("#textboxid").val('');?

Редактировать: ответ на первый комментарий

Как вы видите на своем примере, поле, в которое вы пытаетесь вставить, фактически является контейнером DIVсодержит 2 элемента: поле ввода текста и изображение со ссылкой, которая вызывает событие очистки.

Код здесь: 

<div id="sq" class="clearable style1 divclearable">
<input type="text" class="clearable style1" size="30">
<a class="clearlink" href="javascript:" title="Click to clear this textbox"></a>
</div>
0 голосов
/ 01 февраля 2012

здесь DEMO , потому что вы не опубликовали код, это лучшее, что я могу придумать

UPDATE

здесь DEMO в соответствии с вашим кодом, обратите внимание, что я удалил теги </input> как недопустимый HTML.

...