Question

我只想弄清楚如何在最近的标签标签中模仿输入的占位符。 jQuery是当然的方式。

我的代码看起来像这样：

<div class="group">
   <input placeholder="first" >
   <label> First </label
</div>

<div class="group">
   <input placeholder="second" >
   <label> second </label
</div>

编辑：

检查此Codepen：

https://codepen.io/afasanistan/pen/mRmEwm?editors=1010

Answer 1

将jQuery after()方法与回调函数一起使用。

$('.group input').after(function() {
  // generate the label need to put after the element
  return '<label>' + this.placeholder + '</label>';
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="group">
  <input placeholder="first">
</div>

<div class="group">
  <input placeholder="second">
</div>

Answer 2

尝试：

1 - 为您的输入提供ID。我假设#input1 / #input2

2-

$(document).ready(function() {
    var sd = $('#input1').attr('placeholder');  
    $('label[for^=input1]') = sd ;  
});

Answer 3

尝试使用此浏览器特定的CSS规则，或者您可以使用jquery来编写脚本行为。

::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  text-align: right;
}
::-moz-placeholder {
  /* Firefox 19+ */
  text-align: right;
}
:-ms-input-placeholder {
  /* IE 10+ */
  text-align: right;
}

<div class="group">
  <input placeholder="first">
  <label>First</label>
</div>

<div class="group">
  <input placeholder="second">
  <label>second</label>
</div>

for more info

如何使输入标记旁边的标签等于占位符

3 个答案: