移动设备无法识别预填充的输入

Pre-populated inputs not recognised on mobile devices

提问人:AlwaysConfused 提问时间:11/14/2023 更新时间:11/14/2023 访问量:15

问:

我创建了一些 javascript,它使用我的 Wordpress 站点中用户帐户的详细信息预填充了输入和文本区域。当选择框显示“否”时,这些框将被隐藏,并在用户单击“是”时显示供用户编辑。

这适用于我使用 Chrome 和 Edge 的台式计算机,但在您实际单击并输入一些文本之前,移动设备无法识别输入和文本区域的预填充内容。

// Javascript to pre-populate niche and writing sample inputs. 

jQuery(document).ready(function($) {
    // Fetch the user's 'niche' value via AJAX
    $.ajax({
        url: myAjax.ajaxurl,
        type: 'POST',
        data: {
            action: 'get_user_niche'
        },
        success: function(response) {
            // If the response is not empty, set the input value
            if(response) {
                $('input[name="NICHE"]').val(response);
            }
        }
    });

    // Fetch the user's 'writing_sample' value via AJAX
    $.ajax({
        url: myAjax.ajaxurl,
        type: 'POST',
        data: {
            action: 'get_user_writing_sample'
        },
        success: function(response) {
            // If the response is not empty, set the textarea value
            if(response) {
                $('textarea[name="WRITING_SAMPLE"]').val(response);
            }
        }
    });
});

// Javascript to control visiblity of niche and writing sample as the select values change

jQuery(document).ready(function($) {
    // Initially hide NICHE input and WRITING_SAMPLE text area containers
    $('input[name="NICHE"]').closest('.mwai-form-field.mwai-form-field-input').hide();
    $('textarea[name="WRITING_SAMPLE"]').closest('.mwai-form-field.mwai-form-field-textarea').hide();

    // Listen for changes on EDIT_NICHE select box
    $('select[name="EDIT_NICHE"]').change(function() {
        var nicheContainer = $('input[name="NICHE"]').closest('.mwai-form-field.mwai-form-field-input');

        if ($(this).val() === 'Yes') {
            nicheContainer.show();
        } else {
            nicheContainer.hide();
        }
    });

    // Listen for changes on EDIT_WRITING_SAMPLE select box
    $('select[name="EDIT_WRITING_SAMPLE"]').change(function() {
        var writingSampleContainer = $('textarea[name="WRITING_SAMPLE"]').closest('.mwai-form-field.mwai-form-field-textarea');

        if ($(this).val() === 'Yes') {
            writingSampleContainer.show();
        } else {
            writingSampleContainer.hide();
        }
    });
});

我试过使用它:

var $input = $('input[name="NICHE"]');
$input.val(response).trigger('input');

var $textarea = $('textarea[name="WRITING_SAMPLE"]');
$textarea.val(response).trigger('input');

还有这个:

// For the 'NICHE' input
$.ajax({
    // existing code ...
    success: function(response) {
        if(response) {
            var $input = $('input[name="NICHE"]');
            $input.val(response);
            $input.focus().blur();
        }
    }
});

// For the 'WRITING_SAMPLE' textarea
$.ajax({
    // existing code ...
    success: function(response) {
        if(response) {
            var $textarea = $('textarea[name="WRITING_SAMPLE"]');
            $textarea.val(response);
            $textarea.focus().blur();
        }
    }
});

但是没有喜悦,我仍然需要单击输入和文本区域,添加一些文本才能识别任何文本。

输入 TextArea

评论


答: 暂无答案