Template Literals模板中onInput事件触发修改元素innerHTML的实现问题

解决方法 #

你只需要把原有onInput绑定的parent.handleChange包在一层自定义函数里，先执行原有校验逻辑，再追加更新h2内容的操作即可，原生模板字面量绑定事件处理函数支持直接传入自定义可执行函数。

修改后的输入框代码 #

<input
  type="number"
  className="mf-input "
  min="1900"
  max="2099"
  step="1"
  id="curyear"
  name="currentyear"
  placeholder="${ parent.decodeEntities(`Current Year`) } "
  onInput=${e => {
    parent.handleChange(e); // 保留原有校验逻辑
    const yearTitle = document.getElementById('curyeartext');
    // 输入为空时显示默认文本，否则显示输入的年份，无需XSS风险可将textContent替换为innerHTML
    yearTitle && (yearTitle.textContent = e.target.value || 'Current Year');
  }}
  aria-invalid=${validation.errors['currentyear'] ? 'true' : 'false'}
  ref=${el => parent.activateValidation({"message":"This field is required.","minLength":1900,"maxLength":2099,"type":"by_character_length","required":false,"expression":"null"}, el)}
/>

<${validation.ErrorMessage}
  errors=${validation.errors}
  name="currentyear"
  as=${html`<span className="mf-error-message"></span>`}
/>

注意事项 #

• 确保模板插入DOM时id为curyeartext的h2元素已经存在，否则会获取不到元素无法更新。
• 如果需要插入带HTML格式的内容，直接把textContent替换为innerHTML即可，注意对输入内容做转义避免XSS风险。

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