1
私はtextboxとbuttonです。ボタンをクリックすると、textboxの値が空白の場合は、textboxが赤い枠で強調表示されます。jQuery左から右にスライドします。CSS
しかし、検証メッセージを左から右へでスライドさせるためのコードを入れた後：textboxにfocusを置くことで、検証メッセージは、（左から右にスライド）このようなものが表示されます。以下のように示される：
以下は同じのためのスニペットです。
$(document).ready(function(){
$.fn.textWidth = function (text, font) {
if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
$.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font'));
return $.fn.textWidth.fakeEl.width();
};
$('#btnSave').click(function(){
if (!$('#txtName').val()) {
$('#txtName').addClass('validationInput');
$('#txtName').closest('div').addClass('wrap');
}
else
alert("Success");
});
$('#txtName').on('blur', function() {
if ($(this).val() != "" && $(this).val() != null) {
$(this).removeClass("validationInput");
$(this).closest('div').removeClass("wrap");
}
$(this).parent().parent().siblings().html("");
$(this).parent().parent().siblings().css("display", "none");
});
$('#txtName').on('focus', function() {
if ($(this).hasClass('validationInput')) {
var w = $.fn.textWidth("Please enter name", '12px arial') + 50;
$(this).parent().parent().siblings().html("Please enter name");
//$(this).parent().parent().siblings().css({ "display": "inline-block", "width": w });
$(this).parent().parent().siblings().css({ "width": w }).show('slide', {direction: 'left'}, 1000);
}
});
});.wrapTextboxDiv {
height: 25px;
}
.col-lg-3 {
width: 25%;
}
.wrap span:first-child {
display: flex;
overflow: hidden;
position: relative;
width: 100%;
}
.wrap span:first-child .input-holder::after {
border-color: red;
border-style: solid;
border-width: 5px;
box-shadow: 0 0 0 1px #ffffe0;
content: "";
height: 0;
position: absolute;
right: -5px;
top: -5px;
transform: rotate(45deg);
width: 0;
}
input.vtooltips[type="text"] {
display: inline;
height: 20px;
position: relative;
}
.vspan {
background: #dc000c none repeat scroll 0 0;
border: 1px solid #6d6d6d;
border-radius: 4px;
box-shadow: 2px 2px 0 #afb1b1;
color: #fff;
display: none;
font-family: Arial;
font-size: 12px;
height: 20px;
line-height: 15px;
margin-left: 101%;
opacity: 1;
padding-left: 5px;
padding-right: 5px;
position: relative;
text-align: center;
top: -23px;
z-index: 1000;
}
.validationInput, .validationInput:focus, .validationInput:hover {
background-color: #ffffe0 !important;
border: 1px solid red !important;
height: 20px;
}
.mandatoryText {
background-color: #fafad2 !important;
}
.textbox {
border: 1.5px solid #f2ca8c;
border-radius: 4px !important;
height: 23px !important;
width:90%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<div class="col-lg-3 wrapTextboxDiv">
<span>
<span class="input-holder">
<input type="text" class="mandatoryText vtooltips form-control textbox" style="width: 100%; vertical-align: top; border-radius: 4px;" maxlength="100" id="txtName" name="tname">
</span>
</span>
<span class="vspan"></span>
</div>
<br/>
<br/>
<input type="button" id="btnSave" value="Save"/>私が間違って何をしているのですか？どんな助けもありがとう。
@minnal chauhan nice one –
よろしくお願いします:) –
ありがとう@MinalChauhan :) –