如何通过web_sys实现on:paste事件，拆分验证码到独立输入框

核心问题分析 #

你之前通过document.onpaste()获取粘贴内容的思路是错误的——这个方法返回的是绑定的事件处理函数，而非实际的剪贴板数据。正确的做法是从触发的ClipboardEvent实例中提取剪贴板内容。

正确的粘贴事件处理实现 #

以下是修正后的on:paste事件处理代码（基于Yew框架，从代码中的use_document和事件语法判断）：

on:paste=move |ev| {
    match on_paste {
        Some(on_paste) => {
            ev.prevent_default(); // 阻止默认粘贴行为，避免内容直接插入单个输入框

            // 将通用事件转换为ClipboardEvent实例
            let clipboard_event = match ev.dyn_ref::<ClipboardEvent>() {
                Some(ev) => ev,
                None => return,
            };

            // 获取剪贴板数据对象
            let clipboard_data = match clipboard_event.clipboard_data() {
                Some(data) => data,
                None => return,
            };

            // 获取文本格式的粘贴内容
            match clipboard_data.get_data("text") {
                Ok(paste_text) => {
                    // 过滤非数字字符（验证码通常为数字），保留有效内容
                    let cleaned_code = paste_text.chars().filter(|c| c.is_ascii_digit()).collect::<String>();
                    on_paste.dispatch(cleaned_code);
                },
                Err(err) => {
                    log::error!("获取剪贴板内容失败: {:?}", err);
                }
            }
        },
        None => {},
    }
}

拆分内容填入输入框的后续逻辑 #

拿到清理后的验证码文本后，可在on_paste回调中完成拆分填充：

• 遍历每个字符，依次赋值给对应输入框
• 通过输入框的ref数组控制焦点自动切换，示例代码如下：

  // 假设你有存储输入框ref的数组：code_inputs: Vec<NodeRef>
  for (i, c) in cleaned_code.chars().enumerate() {
      if i >= code_inputs.len() {
          break;
      }
      if let Some(input) = code_inputs[i].cast::<HtmlInputElement>() {
          input.set_value(&c.to_string());
          // 自动聚焦到下一个输入框
          if i < code_inputs.len() - 1 {
              code_inputs[i+1].cast::<HtmlInputElement>().map(|next| next.focus());
          }
      }
  }
  

关键注意事项 #

• 必须调用ev.prevent_default()，否则浏览器会将整段粘贴内容插入当前聚焦的输入框，破坏拆分逻辑
• 使用get_data("text")指定获取文本格式内容，兼容绝大多数剪贴板数据场景
• 建议过滤非数字字符，避免用户粘贴带多余符号的内容导致验证码识别异常

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