在字段旁边显示图像

display image next to field

本文关键字：显示图 图像 显示 字段      更新时间：2024-02-08

我需要验证一个字段，这样如果它有值，就会在字段旁边显示一个"tick"符号。

我有以下javascript函数，用于验证

function validate_this_field(field_value, field_id)
{
   if($j('#' + field_id).val() ) {   
   $j('#' + field_id ).addClass('mandatory_field_completed');
   }
}

css代码

.mandatory_field_completed{
    border-style: solid;
    border-width: 1px;
    border-color: green;
    background:url(../images/tick.png) right no-repeat;
   padding: 4px 4px 4px 34px;
}

上面css的问题是图像显示在字段内部。我想在正在验证的字段外部和旁边显示"勾选"图像。

任何建议都将不胜感激。

非常感谢。

使用display:none样式将图像放在div旁边，然后显示：

function validate_this_field(field_value, field_id)
{
   if($j('#' + field_id).val() ) {   
       $j('#' + field_id ).addClass('mandatory_field_completed')
           .next().show(); // show next element after div
   }
}

或者，您可以拥有一些控件容器div，并在背景中设置图像的样式。

如果您希望它在字段之外，则必须将图像应用于包装元素的背景：

<div class="tick"><input class="txtInput" type="test"></div>

CSS：

    .txtInput {
        width:200px;
    }
   .tick {
       background-image:url(http://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Check_mark_23x20_02.svg/19px-Check_mark_23x20_02.svg.png);
       padding-right:20px;
       background-repeat:no-repeat;
       background-position:205px 0px;
   }

在验证时将类添加到包装中。

相关文章：