JQuery 移动文本字段不会失去焦点答案

【问题标题】：JQuery mobile text field not loosing focusJQuery 移动文本字段不会失去焦点
【发布时间】：2016-02-08 20:18:23
【问题描述】：

我是 JQuery mobile 和 Cordova 的新手。我使用 JQuery mobile 创建了一个简单的 Cordova 应用程序，该应用程序具有一个带有简单文本字段和无线电输入的表单。但是当我输入一些内容时，当应用程序运行时我注意到一个问题文本并单击单选按钮，我注意到焦点仍在文本输入上。如果未使用 JQuery 移动，焦点将从文本输入中消失。我知道 JQuery 移动为这些表单元素添加了一些默认样式。我当我选择单选按钮时，不希望焦点位于文本字段中。请帮助我。我的 HTML 页面代码如下。

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet"> 
        <script src="js/jquery-1.11.3.min.js"></script>
        <script src="js/jquery.mobile-1.4.5.min.js"></script>
    </head>
    <body>
        <div>            
            <form>
                <label for="text-basic">Text input:</label>
                <input type="text" name="text-basic" id="text-basic" value="">               
                <fieldset data-role="controlgroup">
                    <legend>Radio buttons, vertical controlgroup:</legend>
                    <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked">
                    <label for="radio-choice-1">Cat</label>
                    <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2">
                    <label for="radio-choice-2">Dog</label>
                    <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3">
                    <label for="radio-choice-3">Hamster</label>
                    <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4">
                    <label for="radio-choice-4">Lizard</label>
                </fieldset>
            </form>
        </div>
    </body>
</html>

下面附上Mobile View的截图。

在上图中，即使我从单选按钮列表中选择一个元素，您也可以看到 Android 键盘没有关闭。

【问题讨论】：

标签： android html cordova jquery-mobile

【解决方案1】：

试试这个

$("input:radio").addEventListener('touchstart',function(e) {
     $('input[type=text], textarea').focusout();
});

当输入类型单选被触摸时，它会手动从 textarea 或 textinput 移除焦点。

或者试试这个

$("input:radio").addEventListener('touchstart',function(e) {
     $(':focus').blur();
});

【讨论】：