Как получить текстовое поле внутри кнопки JQuery без нажатия кнопки при входе в текстовое поле - PullRequest
Новая
       24

Как получить текстовое поле внутри кнопки JQuery без нажатия кнопки при входе в текстовое поле

0 голосов
/ 09 января 2020 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>Title</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta name="robots" content="noindex, nofollow">
        <meta name="googlebot" content="noindex, nofollow">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
        <script>
        $(document).ready(function () {
            $('#countButton').on("click", function(){
                target=$('#until').prop("value");
                tl=(""+target).length;
                numberString="";
                for(var i=0; i<=target; i++){
                    numberString+=((""+i).padStart(tl, '0'))+"<br />";
                }
                $("#numbers").html(numberString);
            });
        });</script>
    </head>
    <body>
    <button class="ui-button ui-widget ui-corner-all" id="countButton">Count from 0 to <label for="until"> <input id="until" value="20" style="width: 50px;" type="number" min="1" /> </label>!</button>
    <div id="numbers"></div>
</body>
</html>

Это работает тихо и хорошо, но кнопки гаснут, как только я вхожу в числовое поле, есть ли способ предотвратить это? (Я знаю, почему кнопка гаснет, и я понимаю, что могу просто переместить поле за пределы кнопки, но мне очень нравится эта идея дизайна. Также обратите внимание (хотя я не думаю, что это будет иметь значение для решения), что кнопка может быть создана динамически).

1 Ответ

0 голосов
/ 09 января 2020

Это потому, что распространение события из поля ввода (id: before).

Просто перехватите событие и остановите распространение. См. Код ниже. 

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>Title</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta name="robots" content="noindex, nofollow">
        <meta name="googlebot" content="noindex, nofollow">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
        <script>
        $(document).ready(function () {
            $('#countButton').on("click", function(){
                target=$('#until').prop("value");
                tl=(""+target).length;
                numberString="";
                for(var i=0; i<=target; i++){
                    numberString+=((""+i).padStart(tl, '0'))+"<br />";
                }
                $("#numbers").html(numberString);
            });
            $('#until').on("click", function(){
                event.stopPropagation();
            });
        });</script>
    </head>
    <body>
    <button class="ui-button ui-widget ui-corner-all" id="countButton">Count from 0 to <label for="until"> <input id="until" value="20" style="width: 50px;" type="number" min="1" /> </label>!</button>
    <div id="numbers"></div>
</body>
</html>
...