时间戳

首页 > 解决方案 > 启用禁用按钮的 Javascript 字计数器

javascript - 启用禁用按钮的 Javascript 字计数器

问题描述

我想做的是；- 右箭头禁用，直到我开始输入 - 当我单击计算文本框中的单词并且图像更改为左箭头时 - 当我单击左箭头时重新开始进度。

现在它并没有真正显示结果，它只是显示一秒钟并更改图像，但会在一秒钟内自动重新启动所有内容，并且始终启用向右箭头按钮。

$(document).ready(function() {
  $("input").click(function() {
    var words = $.trim($("textarea").val()).split(" ");
    document.getElementById("resultDiv").innerHTML = words.length;
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wordcounter">
  <form action="" method="get" name="frm" onSubmit="TextCount();">
    <!--Text Area-->
    <textarea id="mytext"></textarea><br/>
    <!--Image Flipped Here-->
    <input type="image" id="submit" src="imgs/arrow_button_metal_green_right_T.png" alt="Submit" onclick="document.getElementById('submit').src='imgs/arrow_button_metal_green_left_T.png'">
    <br/>
    <!--Result-->
    <div id="resultDiv">0</div>&nbsp;Characters
  </form>
</div>

标签： javascriptjquery

解决方案

如果用户使用标签或其他东西，最好使用焦点而不是点击。

$(document).ready(function() {
    $('input').blur(function () {
        $('#submit').attr("disabled", "disabled");
    });

    $("input").focus(function () {
        $('#submit').prop('disabled', false);
        var words = $.trim($("textarea").val()).split(" ");
        $("#resultDiv").innerHTML = words.length;
    });

    $("#submit").click(function(){
        var imageSource = $(this).attr('src');
        if(imageSource == "imgs/arrow_button_metal_green_left_T.png"){
            $(this).attr("src","imgs/arrow_button_metal_green_right_T.png");
        }else{
            $(this).attr("src","imgs/arrow_button_metal_green_left_T.png");
        }
    });
});

您可以使用 jQuery 更轻松地获得 resultDiv。

推荐阅读