使用 div 元素的文本作为 jQuery 的占位符答案

【问题标题】：Use div element's text as placeholder with jQuery使用 div 元素的文本作为 jQuery 的占位符
【发布时间】：2019-08-17 22:52:19
【问题描述】：

我有一个奇怪的问题/挑战。我使用的一个插件没有使用真正的占位符作为输入字段，而是在输入字段下方使用 div 元素，现在它来了，他们称之为占位符，非常奇怪。

所以我想用一些 jQuery 来操作它，这对我来说是一个新的水平，所以我已经尝试了第一步。我想看到的是 div 元素的文本被用作input 的实际占位符。我显然可以使用新属性调用每个输入并删除 div，但这为每个单独的输入生成 20 行编码，我希望有 1 个解决方案。所有输入字段都有 2 种一致的 HTML 结构：

html

<div class="ps-form__field ">
    <input type="email" name="email" id="email" class="ps-input email" >
    <div class="ps-form__field-desc lbl-descript">email address</div>
</div>

<div class="ps-form__field">
    <div class="ps-form__field-inner">
        <input type="text" value="" id="profile_field_name" data-id="name" class="ps-input">
    </div>
    <div class="ps-form__field-desc lbl-descript">First name</div>
</div>

我希望将 .ps-form__field-desc 这个类视为 input 的 placeholder。

我的 jQuery 尝试

var txtph = jQuery('.ps-form__field-desc').parents().each().text();
if ( jQuery('.ps-form__field > div').length ) {
    jQuery('.ps-form__field > input').each().attr('placeholder', txtph);
    jQuery('.ps-form__field-desc').remove();
}

我知道上面可能有很多错误，但这对我来说是新的。

【问题讨论】：

标签： jquery html input placeholder

【解决方案1】：

你可以用这个：

$(document).ready(function() {
  $('.ps-form__field input').attr("placeholder",function() {
    return $(this).closest(".ps-form__field").find('.lbl-descript').text()
  });
  $('.lbl-descript').remove()
});

它将选择每个输入并将placeholder属性设置为对应的.lbl-descript的文本

工作演示

$(document).ready(function() {
  $('.ps-form__field input').attr("placeholder", function() {
    return $(this).closest(".ps-form__field").find('.lbl-descript').text()
  });
  $('.lbl-descript').remove()
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ps-form__field ">
  <input type="email" name="email" id="email" class="ps-input email">
  <div class="ps-form__field-desc lbl-descript">email address</div>
</div>

<div class="ps-form__field">
  <div class="ps-form__field-inner">
    <input type="text" value="" id="profile_field_name" data-id="name" class="ps-input">
  </div>
  <div class="ps-form__field-desc lbl-descript">First name</div>
</div>

【讨论】：