使用FeatherLight后无法获取/修改输入框值的问题求助

我来帮你搞定这个问题！之前我也碰到过类似的情况，核心原因是FeatherLight默认在关闭灯箱时会销毁（移除）灯箱内的DOM元素，这就导致你之后再去获取原来的输入框时，页面上已经找不到这个元素了，自然返回undefined。

两种可行的解决方案： #

1. 关闭灯箱前提前保存输入值

在灯箱关闭的瞬间，把输入框的值存到一个全局变量或者其他持久化的位置，之后需要使用时直接调用这个保存的值即可：

// 监听FeatherLight的关闭事件
$(document).on('featherlightclose', function() {
  // 保存输入框的值到全局变量
  window.savedInputValue = $('.featherlight-content input').val();
});

// 后续需要使用值的时候
console.log(window.savedInputValue); // 这里就能拿到正确的值，不会是undefined

2. 修改FeatherLight配置，保留灯箱DOM元素

通过设置persist: true选项，让FeatherLight在关闭灯箱时只是隐藏内容，而不是销毁DOM结构。这样输入框元素始终存在于页面中，随时都能获取到它的值：

// 初始化灯箱时配置persist选项
$.featherlight('#your-lightbox-container', {
  persist: true
});

验证说明 #

你可以打开浏览器的开发者工具，在灯箱关闭前后查看DOM树：关闭前能看到灯箱内的输入框元素，关闭后默认配置下该元素会从DOM中消失，这就是为什么获取值会返回undefined。用上面任意一种方法，都能避免这个问题。

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