文本框后面添加图像不动，它

Question

我想文本框进行验证后显示图像（打勾和交叉） 但是，当我显示或隐藏，文本框垂直跳跃向上或向下

下面是HTML

<table cellspacing="20"> 
<tr> 
    <td>Username</td> 
    <td>*<input type="text" id="username" class="required" name="user.username" value="" size="30" /> 
    </td> 
</table> 

和JavaScript

window.onload = function(){ 

$('input.required').after('<img class="toggle"></img>').next().hide(); 

$('input.required').blur(function() { 
if ($(this).val().length == 0) { 
    $(this) 
    .addClass('error') 
    .next() 
    .attr('src','images/unchecked.gif').fadeIn() 

} 
else 
{ 
    $(this).next().attr('src','images/checked.gif').fadeIn() 
} 

我想的是，文本框应该保持固定，而不是切换图像

0移动

Answer 1

经由css()设置图像的visibility -property到hidden代替使用hide()

visibility:hidden隐藏的元素，但该元件仍然会采取它的空间。 hide()会将显示设置为无，其中元素不占用空间。