如何实现支付宝验证码实时验证的特效

Question

先上个图：
就是当出现四个验证码的时候去后台验证，验证结果以图片的形式显示在输入框的后面，这是怎么弄的？支付宝验证码图片

Answer 1

ajax发送验证码到动态页验证

Answer 2

输入框失去焦点并输入框内容不为空是调用ajax,如果输入的难码不对，就把一个"x"的背景图片显示在输入框里

Answer 3

偷懒直接设置input对象的背景图片就行了淘宝的是通过父容器position：relative定位，xx图片position：absolute来弄，有点罗嗦

Answer 4

设背景图片，这个主意可以试一下，那下面淘宝的做法能说详细点吗？css我也是菜鸟

Answer 5

<div style="position:relative">
<input type="text" style="width:120px"/>
<img src="x的图片地址" style="position:absolute;left:110px;top:0px" alt="x"/>
</div>楼主还是去看下css，要不给你代码你也搞不懂

Answer 6

package com.tarena.netctoss.action;import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.Random;import com.sun.image.codec.jpeg.ImageFormatException;
import com.sun.image.codec.jpeg.JPEGCodec;
import com.sun.image.codec.jpeg.JPEGImageEncoder;public class VerifiCodeAction extends BaseAction {
private InputStream imgCodeStream; private String verifiCode; private boolean ok = false; private static int WIDTH = 80; private static int HEIGHT = 30; private static int NUM = 5; private static char[] seq = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I',
    'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W',
    'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' }; public InputStream getImgCodeStream() {
return imgCodeStream;
} public void setImgCodeStream(InputStream imgCodeStream) {
this.imgCodeStream = imgCodeStream;
} public boolean isOk() {
return ok;
} public void setOk(boolean ok) {
this.ok = ok;
} public String getVerifiCode() {
return verifiCode;
} public void setVerifiCode(String verifiCode) {
this.verifiCode = verifiCode;
} public String code() throws Exception {
String code = imageCode();
// 把code放入Session中
session.put(KEY_VERIFICODE, code); System.out.println(code);
return "success";
} public String verify() throws Exception {
if (verifiCode != null && verifiCode.length() > 0) {
String code = (String) session.get(KEY_VERIFICODE);
if (verifiCode.equals(code)) {
ok = true;
}
}
return "success";
} private String imageCode() throws ImageFormatException, IOException {
Random r = new Random(); // 图片的内存映像
BufferedImage image = new BufferedImage(WIDTH, HEIGHT,
    BufferedImage.TYPE_INT_RGB); // 获得画笔对象
Graphics g = image.getGraphics();
g.setColor(new Color(r.nextInt(255), r.nextInt(255), r.nextInt(255)));
g.fillRect(0, 0, WIDTH, HEIGHT);
g.setColor(new Color(0, 0, 0)); // 用于存储随机生成的验证码
StringBuffer number = new StringBuffer(); // 绘制验证码
for (int i = 0; i < NUM; i++) {
g.setColor(new Color(r.nextInt(10), r.nextInt(10), r.nextInt(10)));
int h = (int) ((HEIGHT * 20 / 100) * r.nextDouble() + (HEIGHT * 80 / 100));
g.setFont(new Font(null, Font.BOLD | Font.ITALIC, h));
String ch = String.valueOf(seq[r.nextInt(seq.length)]);
number.append(ch);
g.drawString(ch, i * WIDTH / NUM * 90 / 100, h);
}  //绘制干扰线
//  for (int i = 0; i <= 12; i++) {
//  g.setColor(new Color(r.nextInt(255), r.nextInt(255), r.nextInt(255)));
//  g.drawLine(r.nextInt(WIDTH), r.nextInt(HEIGHT), r.nextInt(WIDTH), r
//  .nextInt(HEIGHT));
//  } ByteArrayOutputStream baos = new ByteArrayOutputStream();
JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(baos);
encoder.encode(image); imgCodeStream = new ByteArrayInputStream(baos.toByteArray()); return number.toString();
}
}
<img src="verificode.action"
onclick="this.src='verificode.action?'+(new Date()).getTime()" />Js:
//判断必须填写内容
$.fn.required = function (msg, msgCnt) {
var value = this.val();
if (value != null && value.length > 0) {
$(msgCnt).text("");
return true;
} else {
$(msgCnt).text(msg);
return false;
}
};jsp:
  $(function() {
    $("#submit").click(function() {
       var b1 = $("#user").required("用户名必须填写",$("#msg_user"));
       var b2 = $("#pwd").minLength(3,"密码长度必须大于等于3位",$("#msg_pwd"));
       var b3 = $("#verificode").required("验证码必须填写",$("#msg_verificode"));
       var b4 = false;
       if(b3) {
          b4 = $("#verificode").remote("verify.action","验证码错误",$("#msg_verificode"));
       }
       if(b1 && b2 && b4) {
         $("#loginForm").submit();
       }
    });
  });
  

Answer 7

可是只是这样设置的话，x的图片变成绝对定位了，这样不好，万一窗口变小布局整个都不行了。有没有其他办法呢楼主去看下css吧。。这个是相对于他的容器绝对定位，不是相对于整个视窗

Answer 8

可是只是这样设置的话，x的图片变成绝对定位了，这样不好，万一窗口变小布局整个都不行了。有没有其他办法呢楼主去看下css吧。。这个是相对于他的容器绝对定位，不是相对于整个视窗恩 这个方法可以有，已经试过可以了。
只要在父层元素加个布局就行了。3q

Answer 9

感觉就是这个，之前是不显示，输入错误后，再display