Question

我有一个来自JQuery Mobile的Textinput字段（搜索栏/框）。

我想知道是否有任何方式（通过功能）：

清除文字值
隐藏“X”或清除按钮（搜索栏内的自动生成的JQuery Mobile按钮，而不是搜索栏下的按钮）
从搜索栏中删除焦点（Textinput）

我尝试过使用$("#topSearch").val("")，但这不符合第二个标准。我还尝试了$(".ui-input-clear").click()和$("#topSearch").blur()，但这会以不寻常的方式破坏我的程序，很可能与我填充列表的方式有关。我也试过手动使用$(".ui-input-clear").hide()或.toggle()，但JQuery Mobile似乎以不同的方式处理它（因为它不会重新出现）。

必须有一个正确的方法，因为JQuery Mobile已经这样做了 - 当你在textinput框上按Enter键时文本将清除，“X”消失并且焦点被移除。

无论是如何做到这一点，或者如何通过JQuery Mobile的代码来查找他们如何做到这一点都会很棒，我已经尝试过后者而没有运气。

这是一个（更新的）小提琴，供人们玩：http://jsfiddle.net/pWQjZ/1/
不完全确定它会有多大帮助。

另一个编辑：要指定，必须通过与.ui-input-clear“X”按钮无关的功能调用此函数。当点击其他内容时，搜索栏会被其他功能清除 - 而不是“X”（已经有效）。

Answer 1

您似乎知道要使用哪些函数，只需在click事件处理程序中同时使用所有这些函数。

例如：

$(".ui-input-clear").click(function(){
    $("#topSearch").val("");
    $("#topSearch").blur();
    $(".ui-input-clear").closest('.ui-btn').hide();
});

Answer 2

jQuery Mobile隐藏你的元素并将其包装在一个新的div中，该div的外观和行为类似于按钮。

选中 Demo Fiddle 。这是你的更新小提琴。

$('#topSearch').focus(function(){
    $('.ui-input-clear').show();     
});

$('#topSearch').keydown(function(e){

    e = e || window.event;
    if(e.keyCode=='13'){                                  //enter key press
        $(this).val('');
        $(this).blur();                                   //focus out

        $('.ui-input-clear').hide();
    }

});

当前按钮由jQuery mobile包含在<div>中，

<div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="null" data-iconpos="null" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" aria-disabled="false"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">X</span></span><input type="button" value="X" class="ui-input-clear ui-btn-hidden" aria-disabled="false"></div>

hide()事件的另一个解决方案，将您的按钮包裹在<div>这样的内容中。

<div id="someid">
    <input type="button" class="ui-input-clear" value="Button"/>
</div>

清除Textinput文本并隐藏clearBtn

2 个答案: