Question

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

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

bbar: {
    xtype: 'pagingtoolbar',
    doRefresh: function () {
        console.log('Overriding refresh action');
        Ext.getStore('myStore').load({
            params: { // add custom params to existing params
                customParam: 'customValue'
            }
        });
        return false; // cancel load
    }
}

$(document).ready(function() {
  $("input").click(function() {
    var words = $.trim($("textarea").val()).split(" ");
    document.getElementById("resultDiv").innerHTML = words.length;
  });
});

Answer 1

您已将表单配置为执行GET请求。当您单击input type="image"元素时，表单的Submit事件将触发并执行对页面的GET请求。由于没有用于这些请求的处理程序代码，因此您的页面有效地经历了“刷新”。

为防止此行为，请从触发的event事件中捕获click对象，并将其用于回调函数中的preventDefault()：

$(document).ready(function() {
  $("input").click(function(e) {
    e.preventDefault();
    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>

Answer 2

如果用户使用制表符或其他内容，最好使用焦点而不是单击。

$(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。

带启用的Javascript字计数器禁用按钮

2 个答案: