用没有换行符的数据属性填充 HTML 标签

Question

我创建了一个表格来检查密码的长度。如果长度小于 6，则会出现一条错误消息。此消息由 javascript 创建。这就是问题所在，消息出现时每个单词后都有一个换行符。我也用 ' ' 尝试过，但那不起作用:(

如何创建没有换行符的消息？

感谢您的帮助！

$("#registerPass").on("focusout", function() {

  if ($("#registerPass").val().length < 6) {
    $(this).removeClass("valid").addClass("invalid");
    $('#registerPass + label').attr('data-error', 'Mindestens 6 Zeichen nötig!');
  }

});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.11/css/mdb.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.11/js/mdb.min.js"></script>



<form style="color: #757575;" action="#!">
  <div class="md-form mb-5">
    <input type="password" id="registerPass" class="form-control" required>
    <label data-error="" data-success="OK" for="registerPass">Passwort</label>
  </div>
</form>

Answer 1

尝试将 width: 100% 添加到标签元素。我检查了它并更新了下面的代码库。

$("#registerPass").on("focusout", function() {
  if ($("#registerPass").val().length < 6) {
    $(this).removeClass("valid").addClass("invalid");
    $('#registerPass + label').attr('data-error', 'Mindestens 6 Zeichen nötig!');
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.11/css/mdb.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.11/js/mdb.min.js"></script>

<form style="color: #757575;" action="#!">
  <div class="md-form mb-5">
    <input type="password" id="registerPass" class="form-control" required>
    <label data-error="" data-success="OK" for="registerPass" style="width: 100%">Passwort</label>
  </div>
</form>

Answer 2

尝试将 white-space: nowrap 添加到您的 css 并定位标签的 ::after 伪元素。

https://jsfiddle.net/jvko4wdq/

或者，您也可以将 label 宽度设置为 100% 和 CSS。

Answer 3

为元素设置 100% 宽度，就是这样！

<label data-error="" data-success="OK" for="registerPass" style='width: 100%'>Passwort</label>

用没有换行符的数据属性填充 HTML 标签

fill HTML label with data attribute without line break

javascript

jquery

html

mdbootstrap