javascript - 将 div 放在 input 的右下角

Question

我需要在创建时将警报 div 位置放在每个输入的右上角。

这是创建警报的函数

function createAlert(inputName,errorNumber){
    var lang = getUrlParameter('lang');
    var alertText = {
        error0: {
            pt: "Erro",
            en: "Error",
        },
        error2: {
            pt: "O nome de usuário já está em uso",
            en: "The Username already is being used",
        },
        error3: {
            pt: "O endereço eletrónico já está em uso",
            en: "The Email already is being used",
        },
        error4: {
            pt: "O endereço eletrónico é inválido",
            en: "The Email inserted is invalid",
        },
        error5: {
            pt: "A password não coincide",
            en: "The passwords doesn't match",
        }
    }
    var alert ="<div class='alert' id='error"+errorNumber+"'><span class='alertCloseBtn' onclick='this.parentElement.style.display=\"none\";'>&times;</span>"+alertText["error"+errorNumber][lang]+"</div>";
    if(typeof $('#error'+errorNumber)[0] == 'undefined'){
        $('input[name='+inputName+']').after(alert);
    }else{
        $('#error'+errorNumber).remove();
        $('input[name='+inputName+']').after(alert);
    }
}

CSS

标签： javascriptjquerycss

Answer 1

这是一个 javascript 解决方案，它会比 css 更好地工作。

阅读评论以了解

var alert = $("<div class='alert'><span class='alertCloseBtn' onclick='this.parentElement.style.display=\"none\";'>&times;</span>this is error</div>");
var inputName= "sd"

$('input[name='+inputName+']').after(alert);
// here is to position the alert dynamicly. this is better then css where css dose not work sometimes and get a wrong positions
var rect = $('input[name='+inputName+']')[0].getBoundingClientRect(); // input position

// now position the alert box under the input
alert.css({"left": rect.left, top:rect.height + rect.top , position:"absolute", "min-width": rect.width});

.alert
{
min-height:100px;
border:1px solid red;
}

div{
margin:auto;
width:200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<input type="text" name="sd" value="" />

<div>