在文本框旁边显示图像的简单方法？答案

【问题标题】：easy way to show image next to textbox?在文本框旁边显示图像的简单方法？
【发布时间】：2009-11-11 18:03:50
【问题描述】：

我尝试使用 ajax 验证表单...如果框通过验证，我已经让它显示一个叉号或勾号。这是通过显示或隐藏 div 标签来完成的，有没有一种更简单的方法，而我不必为每个交叉和刻度设置一个 div 标签，因为这将使用大约 20 个 div 标签。

谢谢

【问题讨论】：

【解决方案1】：

您可以使用 CSS :before 属性来执行此操作：

.tick:before {
    content:url(tick.gif);
}

.cross:before {
    content:url(cross.gif);
}

（您可能需要稍微调整 CSS 以使图像显示在正确的位置）

然后在您的 javascript 中，只需将 tick 或 cross 类添加到您要在旁边显示图像的每个文本框中。

【讨论】：

谢谢，我该如何在 javascript 中做到这一点？

【解决方案2】：

由于您的验证依赖于 javascript，因此您最初可以将 div 排除在 html 之外，并在验证字段后插入它们。假设您的来源是这样的：

<p><input id="email" name="email" type="text" value="" /></p>

您的脚本可能类似于：

var emailField = document.getElementById('email');
if( isValid(emailField) ){
var tick = document.createElement('DIV');
tick.className = 'tick';
emailField.parentNode.appendChild(tick);
}else{
var cross= document.createElement('DIV');
cross.className = 'cross';
emailField.parentNode.appendChild(cross);
}

您将“.tick”和“.cross”类添加到您的 CSS 并应用背景图像。当然，您需要检查该元素是否已被先前的验证插入。这只是一个简单的例子。

这样一开始就不需要额外的 div。

【讨论】：