填表js代码求助

function888 · 发表于 2025-8-17 20:18:53

网址:aHR0cHM6Ly9tYW5hZ2VyLnpqa3B0Yy5lZHUuY24vemprLnBocA==

这个网页验证码图片需要手动在验证码输入框点击一下才能显示验证码图片，我想要在控制台实现这个效果的js代码，运行js代码可以把网页验证码图片显示出来，求js代码

逢场作戏aa · 发表于 2025-8-17 20:18:54

[JavaScript] 纯文本查看 复制代码

const input = document.querySelector('input[name="captcha"]');
if (input) {
    input.dispatchEvent(new MouseEvent('click', { bubbles: true }));
    input.dispatchEvent(new FocusEvent('focus', { bubbles: true }));
}

cherryy · 发表于 2025-8-18 13:17:55

自己扣下对你有用的，有生成部分

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>验证码示例</title>
<style>
      .captcha-container {
         position: relative;
         width: 200px;
         height: 60px;
         margin: 20px 0;
      }
      #captchaCanvas {
         border: 1px solid #ccc;
         border-radius: 4px;
         cursor: pointer;
      }
      .refresh-icon {
         position: absolute;
         right: 10px;
         top: 50%;
         transform: translateY(-50%);
         cursor: pointer;
         color: #666;
      }
      .refresh-icon:hover {
         color: #333;
      }
      input {
         padding: 8px;
         width: 180px;
         margin-top: 10px;
      }
      button {
         margin-top: 10px;
         padding: 8px 16px;
         background-color: #4CAF50;
         color: white;
         border: none;
         border-radius: 4px;
         cursor: pointer;
      }
      button:hover {
         background-color: #45a049;
      }
      #message {
         margin-top: 10px;
         color: #f44336;
      }
</style>
</head>
<body>
<h3>验证码示例</h3>
<div class="captcha-container">
      <canvas id="captchaCanvas" width="200" height="60"></canvas>
      <span class="refresh-icon">↺</span>
</div>
<input type="text" id="inputCode" placeholder="请输入验证码">
<button>验证</button>
<div id="message"></div>

<script>
      // 验证码字符集
      const codeChars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
      let canvas = document.getElementById('captchaCanvas');
      let ctx = canvas.getContext('2d');
      let refreshIcon = document.querySelector('.refresh-icon');
      let currentCode = '';

      // 生成随机验证码
      function generateCode(length = 4) {
         let code = '';
         for (let i = 0; i < length; i++) {
            const randomIndex = Math.floor(Math.random() * codeChars.length);
            code += codeChars[randomIndex];
         }
         return code;
      }

      // 绘制验证码
      function drawCaptcha() {
         // 清空画布
         ctx.clearRect(0, 0, canvas.width, canvas.height);

         // 绘制背景
         ctx.fillStyle = '#f3f3f3';
         ctx.fillRect(0, 0, canvas.width, canvas.height);

         // 生成验证码
         currentCode = generateCode();

         // 设置字体
         ctx.font = 'bold 30px Arial, sans-serif';

         // 绘制每个字符（随机位置和旋转角度）
         for (let i = 0; i < currentCode.length; i++) {
            // 随机颜色
            ctx.fillStyle = `rgb(${Math.random() * 100}, ${Math.random() * 100}, ${Math.random() * 100})`;

            // 保存当前状态
            ctx.save();

            // 随机位置和旋转
            ctx.translate(40 + i * 30, 35);
            ctx.rotate((Math.random() - 0.5) * 0.5);

            // 绘制字符
            ctx.fillText(currentCode[i], 0, 0);

            // 恢复状态
            ctx.restore();
         }

         // 绘制干扰线
         for (let i = 0; i < 5; i++) {
            ctx.strokeStyle = `rgb(${Math.random() * 200}, ${Math.random() * 200}, ${Math.random() * 200})`;
            ctx.beginPath();
            ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
            ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
            ctx.stroke();
         }

         // 绘制噪点
         for (let i = 0; i < 50; i++) {
            ctx.fillStyle = `rgb(${Math.random() * 150}, ${Math.random() * 150}, ${Math.random() * 150})`;
            ctx.beginPath();
            ctx.arc(Math.random() * canvas.width, Math.random() * canvas.height, 1, 0, 2 * Math.PI);
            ctx.fill();
         }
      }

      // 验证输入的验证码
      function checkCaptcha() {
         const inputCode = document.getElementById('inputCode').value;
         const message = document.getElementById('message');

         if (inputCode === '') {
            message.textContent = '请输入验证码';
            return;
         }

         if (inputCode.toUpperCase() === currentCode.toUpperCase()) {
            message.textContent = '验证成功!';
            message.style.color = '#4CAF50';
         } else {
            message.textContent = '验证码错误，请重新输入';
            message.style.color = '#f44336';
            // 自动刷新验证码
            drawCaptcha();
         }
      }

      // 点击刷新验证码
      refreshIcon.addEventListener('click', drawCaptcha);
      canvas.addEventListener('click', drawCaptcha);

      // 初始化验证码
      drawCaptcha();
</script>
</body>
</html>

逢场作戏aa · 发表于 2025-8-18 13:50:34

// 综合方案：触发输入框事件 + 直接生成验证码图片
(function() {
// 1. 触发验证码输入框的交互（模拟用户点击）
const captchaInput = document.querySelector('input[name="captcha"]');
if (captchaInput) {
      captchaInput.focus(); // 触发聚焦，清空默认文字
      captchaInput.click(); // 模拟点击输入框
      console.log("已触发验证码输入框交互");
} else {
      console.log("未找到验证码输入框");
      return;
}

// 2. 定位验证码图片容器，直接生成并插入图片
const captchaContainer = document.getElementById('captcha');
if (captchaContainer) {
      // 清除容器中可能已有的内容
      captchaContainer.innerHTML = '';

      // 创建验证码图片元素（参考常见验证码URL格式）
      const captchaImg = document.createElement('img');
      // 生成带随机参数的URL，确保获取最新验证码
      const randomParam = Math.random();
      captchaImg.src = `/api/captcha.php?_=${randomParam}`;
      captchaImg.align = "top";
      captchaImg.style.cursor = "pointer";
      // 添加点击刷新功能（与常见逻辑一致）
      captchaImg.onclick = function() {
         this.src = `/api/captcha.php?_=${Math.random()}`;
      };
      captchaImg.title = "点击刷新验证码";

      // 将图片添加到容器中
      captchaContainer.appendChild(captchaImg);
      console.log("已在验证码容器中插入图片");
} else {
      console.log("未找到id为'captcha'的图片容器");
}
})();

逢场作戏aa · 发表于 2025-8-18 13:51:01

[JavaScript] 纯文本查看 复制代码

// 综合方案：触发输入框事件 + 直接生成验证码图片
(function() {
    // 1. 触发验证码输入框的交互（模拟用户点击）
    const captchaInput = document.querySelector('input[name="captcha"]');
    if (captchaInput) {
        captchaInput.focus(); // 触发聚焦，清空默认文字
        captchaInput.click(); // 模拟点击输入框
        console.log("已触发验证码输入框交互");
    } else {
        console.log("未找到验证码输入框");
        return;
    }

    // 2. 定位验证码图片容器，直接生成并插入图片
    const captchaContainer = document.getElementById('captcha');
    if (captchaContainer) {
        // 清除容器中可能已有的内容
        captchaContainer.innerHTML = '';
        
        // 创建验证码图片元素（参考常见验证码URL格式）
        const captchaImg = document.createElement('img');
        // 生成带随机参数的URL，确保获取最新验证码
        const randomParam = Math.random();
        captchaImg.src = `/api/captcha.php?_=${randomParam}`;
        captchaImg.align = "top";
        captchaImg.style.cursor = "pointer";
        // 添加点击刷新功能（与常见逻辑一致）
        captchaImg.onclick = function() {
            this.src = `/api/captcha.php?_=${Math.random()}`;
        };
        captchaImg.title = "点击刷新验证码";
        
        // 将图片添加到容器中
        captchaContainer.appendChild(captchaImg);
        console.log("已在验证码容器中插入图片");
    } else {
        console.log("未找到id为'captcha'的图片容器");
    }
})();

信仰_ · 发表于 2025-8-18 14:18:25

精易模块填表方式：普通填表.文本框_置焦点 (“captcha”, )

信仰_ · 发表于 2025-8-18 14:29:34

function setFocusToThirdInput() {
const captchaInput = document.querySelector('input[name="captcha"]');
if (captchaInput) {
captchaInput.focus();
return true;
}

//因为这个文本框无id只有通过name获取文本框是否存在然后再置焦点

		自动登录	找回密码
密码			注册

[已解决] 填表js代码求助

最佳答案

评分

评分

精易论坛 - 有你更精彩 /2