引导输入，textarea 浮动标签 css

【问题标题】：bootstrap input, textarea float-label css引导输入，textarea 浮动标签 css
【发布时间】：2020-01-14 18:16:21
【问题描述】：

我正在使用 Bootstrap 浮动标签 功能。参考 => https://github.com/tonystar/float-label-css

注意：我已根据我的要求进行了一些更改。

问题：

1) 当我们点击任何输入时，float-label 工作正常。但在浮动标签背景中，bootstrap 的表单输入边框是可见的。

2) 验证发生时，下一个输入的浮动标签会中断，就像浮动标签超出输入字段一样。我在<span class="has-float-label"> 之外使用<span id="error_*****" class="error"></span>

3) 在不同浏览器中的外观如下。 在 IE & Edge 中，默认应用浮动标签。 IE、Edge 都可以吗？

我的案例的其他信息：

Windows 10 64 位
火狐（版本 72.0.1）
Chrome（版本 79.0.3945.117）
Opera（版本 65.0.3467.78）
MS-Edge（版本 44.18362.449.0）
MS-IE（版本 11.535.18362.0）
对于 sn-p => 使用 Bootstrap 4.4.1。

function trim(stringToTrim) {
	return stringToTrim.replace(/^\s+|\s+$/g,"");
}
$(document).ready(function() {
	$("#btn_contactus").click(function () {
		//alert("hi");return false;
		if ( trim($("#firstname").val()) == '' )
		{
			$("#error_firstname").html('Please enter First Name');
			$("#error_firstname").show();
			$("#firstname").val('').focus();
			return false;
		}
		else
		{
			$("#error_firstname").hide();
		}
		if ( trim($("#lastname").val()) == '' )
		{
			$("#error_lastname").html('Please enter Last Name');
			$("#error_lastname").show();
			$("#lastname").val('').focus();
			return false;
		}
		else
		{
			$("#error_lastname").hide();
		}
		var emailfilter  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
		if ( !emailfilter.test(trim($("#emailid").val())) )
		{
			$("#error_emailid").html('Please enter Valid Email ID');
			$("#error_emailid").show();
			$("#emailid").focus();
			return false;
		}
		else
		{
			$("#error_emailid").hide();
		}
		if ( trim($("#phone").val()) == '' )
		{
			$("#error_phone").html('Please enter only 10 digits, not starting with 0. Valid Format : xxx-xxx-xxxx');
			$("#error_phone").show();
			$("#phone").val('').focus();
			return false;
		}
		else
		{
			var value = trim($("#phone").val());
			var phonefilter = /^(?!(0))\d{3}[\-]\d{3}[\-]\d{4}$/;
			if ( !phonefilter.test(value) )
			{
				$("#error_phone").html('Please enter only 10 digits, not starting with 0. Valid Format : xxx-xxx-xxxx');
				$("#error_phone").show();
				$("#phone").focus();
				return false;

			}
			else
			{
				$("#error_phone").hide();
			}
		}
		if ( trim($("#comments").val()) == '' )
		{
			$("#error_comments").html('Please enter Comments/Inquiry');
			$("#error_comments").show();
			$("#comments").val('').focus();
			return false;
		}
		else
		{
			$("#error_comments").hide();
		}
	});
});
.instruction {
  font-size:13px;
  font-weight:600;
  color:green;
}
.required {
  font-size:13px;
  color:#D00;
}
.error {
  font-size:14px;
	font-weight: 600;
	color:#D00;
	letter-spacing: 1px;
	background-color:transparent;
}
.has-float-label{
	display:block;
	position:relative
}
.has-float-label label,.has-float-label>span{
	position:absolute;
	cursor:text;
	font-size:75%;
	opacity:1;
	-webkit-transition:all .2s;
	transition:all .2s;
	top:-.5em;
	left:.75rem;
	z-index:3;
	line-height:1;
	padding:0 1px
}
.has-float-label label::after,.has-float-label>span::after{
	content:" ";
	display:block;
	position:absolute;
	background:#fff;
	height:2px;
	top:50%;
	left:-.2em;
	right:-.2em;
	z-index:-1
}
.has-float-label .form-control::-webkit-input-placeholder{
	opacity:1;
	-webkit-transition:all .2s;
	transition:all .2s
}
.has-float-label .form-control::-moz-placeholder{
	opacity:1;
	transition:all .2s
}
.has-float-label .form-control:-ms-input-placeholder{
	opacity:1;
	transition:all .2s
}
.has-float-label .form-control::placeholder{
	opacity:1;
	-webkit-transition:all .2s;
	transition:all .2s
}
.has-float-label .form-control:placeholder-shown:not(:focus)::-webkit-input-placeholder{
	opacity:0
}
.has-float-label .form-control:placeholder-shown:not(:focus)::-moz-placeholder{
	opacity:0
}
.has-float-label .form-control:placeholder-shown:not(:focus):-ms-input-placeholder{
	opacity:0
}
.has-float-label .form-control:placeholder-shown:not(:focus)::placeholder{
	opacity:0
}
.has-float-label .form-control:placeholder-shown:not(:focus)+*{
	font-size:100%;
	color: #6c757d;
	opacity: 1;
	top:.3em
}
.input-group .has-float-label{
	-webkit-box-flex:1;
	-webkit-flex-grow:1;
	-ms-flex-positive:1;
	flex-grow:1;
	margin-bottom:0;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-webkit-flex-direction:column;
	-ms-flex-direction:column;
	flex-direction:column;
	-webkit-box-pack:center;
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	justify-content:center
}
.has-float-label .form-control:placeholder-shown:not(:focus) + * {
	margin-top: 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-12">
        <h4 class="card-title">Contact Us</h4>
        <form action="" method="post" accept-charset="utf-8">
            <div class="form-row">
                <div class="form-group input-group col-md-6">
                    <span id="error_firstname" class="error"></span>
                    <span class="has-float-label">
                        <input type="text" name="firstname" value="" class="form-control" id="firstname" placeholder="First Name" required="required">
                        <label for="firstname">First Name <span class="required">*</span></label>
                    </span>
                </div>
                <div class="form-group input-group col-md-6">
                    <span id="error_lastname" class="error"></span>
                    <span class="has-float-label">
                        <input type="text" name="lastname" value="" class="form-control" id="lastname" placeholder="Last Name" required="required">
                        <label for="lastname">Last Name <span class="required">*</span></label>
                    </span>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group input-group col-md-6">
                    <span id="error_emailid" class="error"></span>
                    <span class="has-float-label">
                        <input type="email" name="emailid" value="" class="form-control" id="emailid" placeholder="Email ID" required="required">
                        <label for="emailid">Email <span class="required">*</span></label>
                    </span>
                </div>
                <div class="form-group input-group col-md-6">
                    <span id="error_phone" class="error"></span>
                    <span class="has-float-label">
                        <input type="text" name="phone" value="" class="form-control" id="phone" placeholder="Phone Number" required="required" pattern="^(?!(0))\d{3}[\-]\d{3}[\-]\d{4}$">
                        <label for="phone">Phone Number <span class="required">*</span> <span class="instruction">Format : xxx-xxx-xxxx</span></label>
                    </span>
                </div>
            </div>
            <div class="form-group input-group">
                <span class="has-float-label">
                    <input type="text" name="companyname" value="" class="form-control" id="companyname" placeholder="Company Name (Optional)">
                    <label for="companyname">Company Name <span class="text-muted">(Optional)</span></label>
                </span>
            </div>
            <div class="form-group input-group">
                <span id="error_comments" class="error"></span>
                <span class="has-float-label">
                    <textarea name="comments" cols="50" rows="5" class="form-control" id="comments" placeholder="Comments/Inquiry" required="required"></textarea>
                    <label for="comments">Comments/Inquiry <span class="required">*</span></label>
                </span>
            </div>
            <input type="submit" name="btn_contactus" value="Submit" class="btn btn-primary" id="btn_contactus" title="Submit">
        </form>
        </div>
    </div>
</div>

【问题讨论】：

    标签： html css twitter-bootstrap bootstrap-4 label


    【解决方案1】：

    解决方案一：设置浮动标签的background-color

    解决方案 2： 删除浮动标签下方位置错误的 input-group（最好在输入字段下方而不是上方给出消息）

    解决方案 3：请查看此链接可能会对您有所帮助Link

    function trim(stringToTrim) {
	return stringToTrim.replace(/^\s+|\s+$/g,"");
}
$(document).ready(function() {
	$("#btn_contactus").click(function () {
		//alert("hi");return false;
		if ( trim($("#firstname").val()) == '' )
		{
			$("#error_firstname").html('Please enter First Name');
			$("#error_firstname").show();
			$("#firstname").val('').focus();
			return false;
		}
		else
		{
			$("#error_firstname").hide();
		}
		if ( trim($("#lastname").val()) == '' )
		{
			$("#error_lastname").html('Please enter Last Name');
			$("#error_lastname").show();
			$("#lastname").val('').focus();
			return false;
		}
		else
		{
			$("#error_lastname").hide();
		}
		var emailfilter  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
		if ( !emailfilter.test(trim($("#emailid").val())) )
		{
			$("#error_emailid").html('Please enter Valid Email ID');
			$("#error_emailid").show();
			$("#emailid").focus();
			return false;
		}
		else
		{
			$("#error_emailid").hide();
		}
		if ( trim($("#phone").val()) == '' )
		{
			$("#error_phone").html('Please enter only 10 digits, not starting with 0. Valid Format : xxx-xxx-xxxx');
			$("#error_phone").show();
			$("#phone").val('').focus();
			return false;
		}
		else
		{
			var value = trim($("#phone").val());
			var phonefilter = /^(?!(0))\d{3}[\-]\d{3}[\-]\d{4}$/;
			if ( !phonefilter.test(value) )
			{
				$("#error_phone").html('Please enter only 10 digits, not starting with 0. Valid Format : xxx-xxx-xxxx');
				$("#error_phone").show();
				$("#phone").focus();
				return false;

			}
			else
			{
				$("#error_phone").hide();
			}
		}
		if ( trim($("#comments").val()) == '' )
		{
			$("#error_comments").html('Please enter Comments/Inquiry');
			$("#error_comments").show();
			$("#comments").val('').focus();
			return false;
		}
		else
		{
			$("#error_comments").hide();
		}
	});
});
    .instruction {
  font-size:13px;
  font-weight:600;
  color:green;
}
.required {
  font-size:13px;
  color:#D00;
}
.error {
  font-size:11px;
	font-weight: 600;
	color:#D00;
	letter-spacing: 1px;
	background-color:transparent;
}
.has-float-label{
	display:block;
	position:relative
}
.has-float-label label,.has-float-label>span{
	position:absolute;
	cursor:text;
	font-size:75%;
	opacity:1;
	-webkit-transition:all .2s;
	transition:all .2s;
	top:-.5em;
	left:.75rem;
	z-index:3;
	line-height:1;
	padding:0 2px;  
	background:#fff;
}
.has-float-label label::after,.has-float-label>span::after{
	content:" ";
	display:block;
	position:absolute;
	background:#fff;
	height:2px;
	top:50%;
	left:-.2em;
	right:-.2em;
	z-index:-1
}
.has-float-label .form-control::-webkit-input-placeholder{
	opacity:1;
	-webkit-transition:all .2s;
	transition:all .2s
}
.has-float-label .form-control::-moz-placeholder{
	opacity:1;
	transition:all .2s
}
.has-float-label .form-control:-ms-input-placeholder{
	opacity:1;
	transition:all .2s
}
.has-float-label .form-control::placeholder{
	opacity:1;
	-webkit-transition:all .2s;
	transition:all .2s
}
.has-float-label .form-control:placeholder-shown:not(:focus)::-webkit-input-placeholder{
	opacity:0
}
.has-float-label .form-control:placeholder-shown:not(:focus)::-moz-placeholder{
	opacity:0
}
.has-float-label .form-control:placeholder-shown:not(:focus):-ms-input-placeholder{
	opacity:0
}
.has-float-label .form-control:placeholder-shown:not(:focus)::placeholder{
	opacity:0
}
.has-float-label .form-control:placeholder-shown:not(:focus)+*{
	font-size:100%;
	color: #6c757d;
	opacity: 1;
	top:.3em
}
.input-group .has-float-label{
	-webkit-box-flex:1;
	-webkit-flex-grow:1;
	-ms-flex-positive:1;
	flex-grow:1;
	margin-bottom:0;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-webkit-flex-direction:column;
	-ms-flex-direction:column;
	flex-direction:column;
	-webkit-box-pack:center;
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	justify-content:center
}
.has-float-label .form-control:placeholder-shown:not(:focus) + * {
	margin-top: 6px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-12">
        <h4 class="card-title">Contact Us</h4>
        <form action="" method="post" accept-charset="utf-8">
            <div class="form-row">
                <div class="form-group col-md-6">
                   
                    <span class="has-float-label">
                        <input type="text" name="firstname" value="" class="form-control" id="firstname" placeholder="First Name" required="required">
                        <label for="firstname">First Name <span class="required">*</span></label>
                    </span>
                     <span id="error_firstname" class="error"></span>
                </div>
                <div class="form-group col-md-6">
                    
                    <span class="has-float-label">
                        <input type="text" name="lastname" value="" class="form-control" id="lastname" placeholder="Last Name" required="required">
                        <label for="lastname">Last Name <span class="required">*</span></label>
                    </span>
                    <span id="error_lastname" class="error"></span>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    
                    <span class="has-float-label">
                        <input type="email" name="emailid" value="" class="form-control" id="emailid" placeholder="Email ID" required="required">
                        <label for="emailid">Email <span class="required">*</span></label>
                    </span>
                    <span id="error_emailid" class="error"></span>
                </div>
                <div class="form-group col-md-6">
                    <span class="has-float-label">
                        <input type="text" name="phone" value="" class="form-control" id="phone" placeholder="Phone Number" required="required" pattern="^(?!(0))\d{3}[\-]\d{3}[\-]\d{4}$">
                        <label for="phone">Phone Number <span class="required">*</span> <span class="instruction">Format : xxx-xxx-xxxx</span></label>
                    </span>
                    <span id="error_phone" class="error"></span>
                </div>
            </div>
            <div class="form-group ">
                <span class="has-float-label">
                    <input type="text" name="companyname" value="" class="form-control" id="companyname" placeholder="Company Name (Optional)">
                    <label for="companyname">Company Name <span class="text-muted">(Optional)</span></label>
                </span>
            </div>
            <div class="form-group">
                
                <span class="has-float-label">
                    <textarea name="comments" cols="50" rows="5" class="form-control" id="comments" placeholder="Comments/Inquiry" required="required"></textarea>
                    <label for="comments">Comments/Inquiry <span class="required">*</span></label>
                </span><span id="error_comments" class="error"></span>
            </div>
            <input type="submit" name="btn_contactus" value="Submit" class="btn btn-primary" id="btn_contactus" title="Submit">
        </form>
        </div>
    </div>
</div>

    【讨论】：

      猜你喜欢
      • 2021-10-13
      • 1970-01-01
      • 2015-11-10
      • 2013-11-26
      • 2021-07-05
      • 1970-01-01
      • 2021-11-26
      • 2021-08-21
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode