jQuery从左向右滑动扭曲CSS

时间：2016-12-06 05:12:33

标签： javascript jquery html css twitter-bootstrap

我有textbox和button。点击该按钮，如果textbox值为空，则textbox将以红色边框突出显示。将focus放在textbox上时，将显示验证消息（从左到右滑动），如下所示：

Desired output

但是在将代码从左向右滑入后，验证消息如下所示：

Actual Output

以下是相同的代码段。

$(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"/>

我做错了什么？任何帮助将不胜感激。

2 个答案:

答案 0 :(得分：3)

删除margin-left并在left:100%课程中添加.vspan。

$(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%;*/ /* Remove this*/
  opacity: 1;
  padding-left: 5px;
  padding-right: 5px;
  position: relative;
  text-align: center;
  top: -23px;
  z-index: 1000;
  left:100%;
}

.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"/>

答案 1 :(得分：1)

只需使用float:left属性执行此操作，将float添加到此类.vspan，只需尝试使用此代码段

＆＃13;
＆＃13; 
$(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);
        }
    });
});
＆＃13; 
.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;
    left: 100%;
    opacity: 1;
    padding-left: 5px;
    padding-right: 5px;
    position: relative;
    text-align: center;
    top: -23px;
    z-index: 1000;
	float:left;
}

.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%;
}
＆＃13; 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>

</head>

<body>

<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"/>
    
<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>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题