javascript - 输入文本框 HTML Bootswatch 有错误

Question

我正在使用this ，特别是输入错误文本框示例。

我只希望当用户在文本框内单击时该文本框显示为红色，然后在用户单击文本框外时消失。

我已经使用此 source 使用 HTML 的不同部分完成了此操作。

问题在于，如果我使用隐藏选项..它将隐藏整个标签和文本框..

这是我使用它以及上面提供的源代码的 HTML:

<div class="form-group">
    <div id="Text-Warning" class="has-error">
        @Html.LabelFor(model => model.ATime, "HOBBS:", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            <div id="H-Alert" class="alert alert-dismissable alert-danger" style="float:right;">
                <button type="button" class="close" data-dissmiss="alert">&times;</button>
                <text>
                    <strong>Leave blank if there is already a Daily Summary for the Day that you are entering! This will auto-calculate based on the previous Summaries.</strong>
                </text>
            </div>
            @Html.EditorFor(model => model.ATime, new { htmlAttributes = new { @id = "inputError", @class = "form-control hobbs-textbox", @placeholder = "xxxx.x" } })
            @Html.ValidationMessageFor(model => model.ATime, "", new { @class = "text-danger" })
        </div>
    </div>
</div>

和我的JS:

$(document).ready(function () {
    $('#H-Alert').hide();
    $('.h-textbox').blur(function () {
        $('#H-Alert').hide();
    }).focus(function () {
        $('#H-Alert').show();
    });
});

同样，上面的 JS 与警报框配合使用。但是，当用户单击文本框内部时，如何让它与文本框和标签一起显示，然后当用户单击其他地方时恢复正常？

感谢任何帮助。

Answer 1

那么你有一个文本框(它看起来像是#inputError)？当用户输入文本框时，您希望它变成红色并显示 #H-Alert 吗？当焦点离开#inputError时，颜色应该恢复并且警报应该消失？

如果我对问题的理解正确，类似这样的事情似乎可能有效:

1. 从 Text-Warning div 中删除 has-error 类。

2. 使用这个 jQuery:

   var $warningWrapper = $('#inputError').closest('#Text-Warning');
   var $alert = $('#H-Alert');
   $('#inputError').focus(function(){
       $alert.show();
       $warningWrapper.addClass('has-error');   // has-error is what styles the input and label in red
   }).blur(function(){
       $alert.hide();
       $warningWrapper.removeClass('has-error');
   });
   

顺便说一句，我不会为文本框提供真实的 inputError id。您可以将其称为有意义的名称(因为 #inputError 没有与之关联的样式)。