将隐藏输入框的值显示到Span标签的jQuery实现问题求助

问题说明 #

你需要把name为numberselection的隐藏<input>元素的自动填充值，同步显示到id为showchosen的<span>标签中，但目前编写的代码未达到预期效果。

现有代码的问题 #

你定义的displayNumbers函数仅实现了“传入参数设置input和span的值”的逻辑，但这个函数从未被调用过；更关键的是，它和你需要的“监听input自动填充的值变化并同步到span”的需求不匹配——因为input的值是自动填充的，你需要的是当input值改变时自动触发更新，而非手动传参设置。

解决方案 #

根据自动填充的触发机制，提供两种可行方案：

方案1：监听input的change事件（优先尝试）

如果自动填充操作会触发input的change事件，直接监听该事件同步值即可：

var $e = jQuery.noConflict();
$e(document).ready(function() {
    // 监听隐藏input的值变化
    $e('input[name="numberselection"]').on('change', function() {
        var numValue = $e(this).val();
        $e('#showchosen').html(numValue);
    });

    // 页面加载时若input已有初始值，先同步一次
    var initialValue = $e('input[name="numberselection"]').val();
    if (initialValue) {
        $e('#showchosen').html(initialValue);
    }
});

方案2：定时检查值变化（适配无事件触发的自动填充）

部分浏览器或脚本自动填充input时不会触发change事件，此时可以用定时检查的方式同步值：

var $e = jQuery.noConflict();
$e(document).ready(function() {
    var lastValue = '';
    // 每隔500毫秒检查一次input值
    setInterval(function() {
        var currentValue = $e('input[name="numberselection"]').val();
        if (currentValue !== lastValue) {
            lastValue = currentValue;
            $e('#showchosen').html(currentValue);
        }
    }, 500);
});

额外提示 #

• 确保jQuery脚本在你的代码之前加载，否则jQuery.noConflict()会报错
• 如果知道是哪个脚本负责填充input的值，最好直接在该脚本的填充完成逻辑后添加$e('#showchosen').html(填充的值)，这种方式比监听或定时更高效

内容的提问来源于stack exchange，提问作者JayJay