Question

我是JQuery mobile和Cordova的新手。我使用JQuery mobile创建了一个简单的Cordova应用程序，其中包含一个带有简单文本字段和无线电输入的表单。但是当我输入应用程序时，我注意到了一个问题文本并单击单选按钮，我注意到焦点仍然是文本输入。如果没有使用JQuery mobile，焦点将从文本输入中消失。我知道JQuery mobile为这些表单元素添加了一些默认样式.I当我选择单选按钮时，我不希望焦点在文本字段中。请帮我解决这个问题。下面给出了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键盘没有关闭。

Answer 1

试试这个

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

当触摸输入类型的无线电时，手动从textarea或textinput移除焦点。

或试试这个

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

JQuery移动文本字段没有失去焦点

1 个答案: