輸入文本框HTML Bootswatch有錯誤

我正在使用this，具體是輸入錯誤文本框的例子。輸入文本框HTML Bootswatch有錯誤

我只想讓文本框顯示爲紅色，如果用戶點擊了文本框內的內容，然後在用戶點擊它時消失。

我已經使用這個source這個HTML的不同部分做了這個。

這裏的問題是，如果我使用hide選項..它會隱藏整個標籤和文本框..

下面是使用這種與源沿着我的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警告框工程..但我怎麼當用戶在文本框內單擊時，讓它與文本框和標籤一起顯示，然後在用戶點擊其他位置時恢復正常。

任何幫助表示讚賞。

來源

2016-05-24 GTown-Coder

所以你有一個文本框（它看起來像是叫做#inputError）？當用戶輸入文本框時，您希望它變爲紅色並且出現#H-Alert？當焦點離開#inputError顏色應該恢復並且警報應該消失？

如果我理解正確的問題，這樣的事情看起來它可能工作：

從Text-Warning DIV取出has-error類。

使用此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沒有與之相關的樣式）。

來源

2016-05-24 15:02:47 Lesley

輸入文本框HTML Bootswatch有錯誤

回答

相關問題