logo标签列表

如何使用HTML移除只读格式和输入类型重叠

javascriptpythonhtml
4
我已经创建了一个表单，其中包含两个字段：姓名和电子邮件，它们的输入类型为文本，并且在只读格式下。当我尝试运行这段代码时，输出结果与文本值和文本字段重叠。
以下是我的代码：

$(document).ready(function() {

  $('input').blur(function() {

    // check if the input has any value (if we've typed into it)
    if ($(this).val())
      $(this).addClass('used');
    else
      $(this).removeClass('used');
  });

});
/* form starting stylings ------------------------------- */

.group {
  position: relative;
  margin-bottom: 45px;
}

input {
  font-size: 18px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 300px;
  border: none;
  border-bottom: 1px solid #757575;
}

input:focus {
  outline: none;
}

label {
  color: #999;
  font-size: 18px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: 0.2s ease all;
}


/* active state */

input:focus~label,
input:valid~label {
  top: -20px;
  font-size: 14px;
  color: #5264AE;
}

.bar {
  position: relative;
  display: block;
  width: 300px;
}

.bar:before,
.bar:after {
  content: '';
  height: 2px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: #5264AE;
  transition: 0.2s ease all;
}

.bar:before {
  left: 50%;
}

.bar:after {
  right: 50%;
}


/* active state */

input:focus~.bar:before,
input:focus~.bar:after {
  width: 50%;
}

.highlight {
  position: absolute;
  height: 60%;
  width: 100px;
  top: 25%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}


/* active state */

input:focus~.highlight {
  animation: inputHighlighter 0.3s ease;
}


/* ANIMATIONS ================ */

@keyframes inputHighlighter {
  from {
    background: #5264AE;
  }
  to {
    width: 0;
    background: transparent;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <br/>
  <br/>

  <div class="group">
    <input type="text" readonly value="shruthi">
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>Name</label>
  </div>

  <div class="group">
    <input type="text" readonly value="shruthi@gmail.com">
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>Email</label>
  </div>

</form>

但是我的期望输出是，我想要一个没有重叠文本字段和文本值的表单。

我不知道我的代码有什么问题。可以有人帮忙吗？

4个回答
2

这是我的自创内容。我的错误在于 CSS 上的编辑。我进行了修改后，得到了我期望的输出结果。

以下是我的代码：

<!DOCTYPE html>
<html>
<head>
    <title>helllo</title>


    <style>
    /* form starting stylings ------------------------------- */
.group        {
  position:relative;
  margin-bottom:45px;
}
input         {
  font-size:18px;
  padding:10px 10px 10px 5px;
  display:block;
  width:300px;
  border:none;
  border-bottom:1px solid #757575;
}
input:focus     { outline:none; }
    label          {
  color:#999;
  font-size:18px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  top:-20px;
  font-size:14px;
  color:#5264AE;
  transition:0.2s ease all;
}

/* active state */
input:focus ~ label, input:valid ~ label     {
  top:-20px;
  font-size:14px;
  color:#5264AE;
}
    .bar  { position:relative; display:block; width:300px; }
.bar:before, .bar:after   {
  content:'';
  height:2px;
  width:0;
  bottom:1px;
  position:absolute;
  background:#5264AE;
  transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%;
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
  width:50%;
}
    .highlight {
  position:absolute;
  height:60%;
  width:100px;
  top:25%;
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
input:focus ~ .highlight {
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@keyframes inputHighlighter {
  from  { background:#5264AE; }
  to    { width:0; background:transparent; }
}
</style>
</head>
<body>
    <form>
    <br/>
    <br/>

  <div class="group">
    <input type="text" readonly value="shruthi">
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>Name</label>
  </div>

  <div class="group">
    <input type="text" readonly value="shruthi@gmail.com" id="well">
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>Email</label>
  </div>

</form>

<script>
    $(document).ready(function() {

  $('input').blur(function() {


    // check if the input has any value (if we've typed into it)
    if ($(this).val())
      $(this).addClass('used');
    else
      $(this).removeClass('used');
  });

});
</script>

</body>
</html>
1

只需将您的标签位置设置为top：-20px。就可以了。

$(document).ready(function() {

  $('input').blur(function() {

    // check if the input has any value (if we've typed into it)
    if ($(this).val())
      $(this).addClass('used');
    else
      $(this).removeClass('used');
  });

});
/* form starting stylings ------------------------------- */

.group {
  position: relative;
  margin-bottom: 45px;
}

input {
  font-size: 18px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 300px;
  border: none;
  border-bottom: 1px solid #757575;
}

input:focus {
  outline: none;
}

label {
  color: #999;
  font-size: 18px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: -20px;
  transition: 0.2s ease all;
}


/* active state */

input:focus~label,
input:valid~label {
  top: -20px;
  font-size: 14px;
  color: #5264AE;
}

.bar {
  position: relative;
  display: block;
  width: 300px;
}

.bar:before,
.bar:after {
  content: '';
  height: 2px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: #5264AE;
  transition: 0.2s ease all;
}

.bar:before {
  left: 50%;
}

.bar:after {
  right: 50%;
}


/* active state */

input:focus~.bar:before,
input:focus~.bar:after {
  width: 50%;
}

.highlight {
  position: absolute;
  height: 60%;
  width: 100px;
  top: 25%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}


/* active state */

input:focus~.highlight {
  animation: inputHighlighter 0.3s ease;
}


/* ANIMATIONS ================ */

@keyframes inputHighlighter {
  from {
    background: #5264AE;
  }
  to {
    width: 0;
    background: transparent;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <br/>
  <br/>

  <div class="group">
    <input type="text" readonly value="shruthi">
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>Name</label>
  </div>

  <div class="group">
    <input type="text" readonly value="shruthi@gmail.com">
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>Email</label>
  </div>

</form>

它解决了问题，但我不认为这是 OP 想要的。仍然应该有标签占位符转换。 - bhansa
你需要为标签添加过渡效果吗？ - Bharath Kumar
但我认为这是更好的解决方案，因为它显示了标签，否则会令人困惑。 - bhansa
非常感谢帮助我的人。但是我自己完成了这个项目，并且刚刚得到了输出结果。谢谢大家。 - Sruthipriyanga
0
根据我对您的问题的理解，您的标签是绝对定位，导致标签和输入框重叠。只需将标签位置更改为静态或相对即可，如果删除该块也可以解决问题。
label {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute; // remove this block it works
pointer-events: none;
left: 5px;
top: 10px;
transition: 0.2s ease all;
标签 { 颜色：＃999; 字体大小：18px; 字重：普通; 位置：绝对;//将其更改为相对位置; 指针事件：无; 左：5px; 上：10px; 过渡：0.2秒轻松全部; - designerdarpan
0

readonly属性会扭曲CSS。因此，我创建了一个名为disabled-control的类，它将使输入框表现得像一个readonly字段。

/* prevent typing */
$('.disabled-control').keypress(function(e) {
    e.preventDefault();
});

/* blurring so caret doesn't show; timeout so underline transition
ends before blurring */
$('.disabled-control').click(function(e) {
    var me = $(this);
    setTimeout(function(){ me.blur(); }, 200);  
});
.group      { 
  position:relative; 
  margin-bottom:45px; 
}
input  , input:read-only   {
  font-size:18px;
  padding:10px 10px 10px 5px;
  display:block;
  width:300px;
  border:none;
  border-bottom:1px solid #757575;
}
input:focus   { outline:none; }

/* LABEL ======================================= */
label      {
  color:#999; 
  font-size:18px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

/* active state */
input:focus ~ label, input:valid ~ label   {
  top:-20px;
  font-size:14px;
  color:#5264AE;
}

/* BOTTOM BARS ================================= */
.bar  { position:relative; display:block; width:300px; }
.bar:before, .bar:after  {
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:#5264AE; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%; 
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
  width:50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
  position:absolute;
  height:60%; 
  width:100px; 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
input:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
 from { background:#5264AE; }
  to  { width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
 from { background:#5264AE; }
  to  { width:0; background:transparent; }
}
@keyframes inputHighlighter {
 from { background:#5264AE; }
  to  { width:0; background:transparent; }
}

 .disabled-control{
      opacity: 0.4;
      cursor: not-allowed;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form style="margin-top: 50px;">
    
    <div class="group">      
      <input type="text" required value="shruthi" class="disabled-control">
      <span class="highlight"></span>
      <span class="bar"></span>
      <label>Name</label>
    </div>
      
    <div class="group">      
      <input type="text" required value="shruthi@gmail.com" class="disabled-control">
      <span class="highlight"></span>
      <span class="bar"></span>
      <label>Email</label>
    </div>
    
  </form>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接