Question

大家好我使用以下代码将数据添加到我的文本区域 -

$('a#mod_description_onclick').click(function(){ 
    $('#MOD-DESCRIPTION').modal('show', {backdrop: 'static'}); 
    $.ajax({
        url: "tab.description.php",
        success: function(response){
            $('#MOD-DESCRIPTION .modal-body').html(response);
        }
    }); 
})

和以下代码在键入时计算字符 -

$(document).ready(function(){
    var left = 2000
    var txtrest = '<?php echo lang("SYSTEM_CHARECTERS_LEFT");?>';
    $('#text_counter').text(txtrest + ' ' + left);

        $('#field-ta').keyup(function () {

        left = 2000 - $(this).val().length;

        if(left < 0){
            $('#text_counter').addClass("overlimit");
             $('#submit_description').attr("disabled", true);
        }
        if(left > 1950){
            $('#text_counter').addClass("overlimit");
             $('#submit_description').attr("disabled", true);
        }
        else{
            $('#text_counter').removeClass("overlimit");
            $('#submit_description').attr("disabled", false);
        }

        $('#text_counter').text(txtrest + ' ' + left);
    });
});

这里的帮助是我的 tab.description.php 文件的内容，该文件由ajax调用以从我的mysql获取数据并刷新textarea的内容。

<textarea  rows="5" maxlength="2000" class="form-control " id="field-ta" name="field-ta" >
   <?php echo get_profile_value('5001') ?>
</textarea>

所以我的问题是如果我硬编码textarea而不是使用ajax方法我的角色计数器工作。或者换句话说用ajax更新我的模态表单会阻止我的角色计数器停止工作。

问题出在哪里？

由于

Answer 1

问题是字符计数器是由keyup事件触发的，但是使用ajax并不会发出keyup事件

Answer 2

我不相信使用AJAX会触发键盘事件 - 只有实际键入文本字段才会触发。我不确定最佳解决方案是什么，尽管这应该有效：

function countChars = function () {
    left = 2000 - $(this).val().length;

    if(left < 0){
        $('#text_counter').addClass("overlimit");
        $('#submit_description').attr("disabled", true);
    }
    if(left > 1950){
        $('#text_counter').addClass("overlimit");
        $('#submit_description').attr("disabled", true);
    }
    else{
        $('#text_counter').removeClass("overlimit");
        $('#submit_description').attr("disabled", false);
    }

    $('#text_counter').text(txtrest + ' ' + left);
}

$(document).ready(function(){
    var left = 2000
    var txtrest = '<?php echo lang("SYSTEM_CHARECTERS_LEFT");?>';
    $('#text_counter').text(txtrest + ' ' + left);

        $('#field-ta').keyup(countChars);
});

请注意，我已将keyup事件提取到另一个函数，以便AJAX函数可以调用它，如下所示：

$('a#mod_description_onclick').click(function(){ 
    $('#MOD-DESCRIPTION').modal('show', {backdrop: 'static'}); 
    $.ajax({
        url: "tab.description.php",
        success: function(response) {
            $('#MOD-DESCRIPTION .modal-body').html(response);
            countChars();
        }
    }); 
})

或者，您可以触发手动键盘事件，如下所示：

$('a#mod_description_onclick').click(function(){ 
    $('#MOD-DESCRIPTION').modal('show', {backdrop: 'static'}); 
    $.ajax({
        url: "tab.description.php",
        success: function(response) {
            $('#MOD-DESCRIPTION .modal-body').html(response);
            $('#MOD-DESCRIPTION .modal-body').trigger('keyup');
        }
    }); 
})

我希望这能指出你正确的方向。

使用ajax获取数据时操作textarea

2 个答案: