使用SweetAlert2保存输入值到文本框时返回[object Object]问题求助

问题根源 #

你的代码出现[object Object]是因为几个关键错误：

• SweetAlert2的.then()回调返回的是结果对象，不是直接的输入值，直接赋值会把整个对象写入文本框
• DOM元素的赋值属性是小写的value，你写成了大写Value，JS是区分大小写的
• icon: info里的info未加引号，会被识别为未定义变量
• .then()的语法错误，箭头函数参数需要用括号包裹
• 成功提示弹窗位置错误，会在输入弹窗关闭前就触发

修正后的代码 #

eformEvents.onFormLoadComplete = function() {
  Swal.fire({
    // rtl:true 
    title: 'title',
    html: '<p>hello</p>',
    icon: 'info',
    input: 'text',
    inputLabel: 'Enter ID'
  })
  .then((result) => {
    // 可选：判断用户是否点击确认按钮，避免取消时赋值空值
    if (result.isConfirmed) {
      // 取result.value获取用户输入，用小写value赋值
      document.getElementById("Eid").value = result.value;
      // 成功提示放在回调内，确保输入完成后触发
      Swal.fire('Success');
    }
  });
}

关键修改说明 #

1. 获取正确的输入值：SweetAlert2的then()返回的对象中，result.value才是用户实际输入的内容，直接用对象会显示[object Object]
2. 修正属性大小写：DOM输入框的赋值必须用小写value，大写Value是无效属性
3. 补全字符串引号：icon: 'info'把info用引号包裹，避免变量未定义错误
4. 调整逻辑顺序：把成功提示放在then()回调内，确保用户完成输入操作后再触发
5. 增加确认判断：通过result.isConfirmed过滤用户点击取消的情况，防止空值写入文本框

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