项目标题和描述上的占位符

Question

我尝试在标题和描述框上添加一个占位符。

我已经尝试过这个脚本，但它不起作用！

希望有人能以正确的方式帮助我！

<script type="text/javascript">
  $( document ).ready(function() {
    $('#title').attr("placeholder", "test");
    $('#description').attr("placeholder", "test");
  });
</script>



      <div id="item-post-title" class="item-post-title">
        <label class="control-label" for="title[<?php echo osc_current_user_locale(); ?>]" style="width: auto;display: inline-block;">
          <span class="required_fields">* </span>
          <?php _e('Title', 'ctg_housing'); ?>
          (<?php printf(__('max %s chars','ctg_housing'),$max_character_length_title); ?>) 
        </label> <span id="Tcounter"></span>
        <?php ItemForm::title_input('title',osc_current_user_locale(), osc_esc_html( ctg_housing_item_title() )); ?>
      </div>
      <div id="item-post-description" class="item-post-description">
        <label class="control-label" for="description[<?php echo osc_current_user_locale(); ?>]" style="width: auto;display: inline-block;">
          <span class="required_fields">* </span>
          <?php _e('Description', 'ctg_housing'); ?>
          (<?php printf(__('max %s chars','ctg_housing'),$max_character_length_description); ?>)
        </label> <span id="Dcounter"></span>
        <?php ItemForm::description_textarea('description',osc_current_user_locale(), osc_esc_html( ctg_housing_item_description() )); ?>
        <?php if(!osc_plugin_is_enabled('richedit/index.php')){ ?>
        <?php } ?>
      </div>

谢谢

Answer 1

首先检查你的jquery libraby是否包含，如果没有，你可以添加cdn jquery by

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

或者你可以使用js来设置placeholder。（例如我在div下面添加）。

 document.getElementById("title").placeholder = "hello";

注意：请在div下方或页脚中添加js。

示例-

<div id="item-post-title" class="item-post-title">
        <label class="control-label" for="title[<?php echo osc_current_user_locale(); ?>]" style="width: auto;display: inline-block;">
          <span class="required_fields">* </span>
          <?php _e('Title', 'ctg_housing'); ?>
          (<?php printf(__('max %s chars','ctg_housing'),$max_character_length_title); ?>) 
        </label> <span id="Tcounter"></span>
        <?php ItemForm::title_input('title',osc_current_user_locale(), osc_esc_html( ctg_housing_item_title() )); ?>
      </div>
      <div id="item-post-description" class="item-post-description">
        <label class="control-label" for="description[<?php echo osc_current_user_locale(); ?>]" style="width: auto;display: inline-block;">
          <span class="required_fields">* </span>
          <?php _e('Description', 'ctg_housing'); ?>
          (<?php printf(__('max %s chars','ctg_housing'),$max_character_length_description); ?>)
        </label> <span id="Dcounter"></span>
        <?php ItemForm::description_textarea('description',osc_current_user_locale(), osc_esc_html( ctg_housing_item_description() )); ?>
        <?php if(!osc_plugin_is_enabled('richedit/index.php')){ ?>
        <?php } ?>
      </div>

<script type="text/javascript">
  document.getElementById("title").placeholder = "hello";
</script>

请检查这个 jsfiddle http://jsfiddle.net/889zepgf/

Answer 2

据我了解您的代码，它会动态生成字段 ID，例如 - titleen_US、descriptionen_US 等。因此 您不能以 - $('#title').attr("placeholder", "test"); 和 @987654324 的身份访问它@ 在你的 jQuery 中。

而且这样做并不是更好的解决方案 -

$( document ).ready(function() {
    $('#titleen_US').attr("placeholder", "test");
    $('#descriptionen_US').attr("placeholder", "test");
});

因为，您的 osc_current_user_locale() 将根据用户区域设置返回不同的值，并且它仅适用于区域设置 - en_US 和 不适用于其他地区。

所以，不要让事情复杂化，而是将 class 属性应用于您的 html 输入，分别为 - class="title" & class="description" 等等您的 jQuery 代码将是 -

$( document ).ready(function() {
    $('.title').attr("placeholder", "test");
    $('.description').attr("placeholder", "test");
});

Answer 3

感谢您的解决方案！

<script type="text/javascript">
  $( document ).ready(function() {
    $('#titleen_US').attr("placeholder", "Test Title");
  });
</script>