带复选框的文本区域占位符

Textarea placeholder with a checkbox

本文关键字:区域 占位符 文本 复选框      更新时间:2023-09-26

我正试图通过按下复选框按钮来更改文本区域的占位符。我就是无法改变。

为了清楚起见,我试图设置一个占位符而不是一个值。

我的文本区域:

<textarea name="problem" id="problem" rows="3" class="form-control" cols="45" placeholder="Describe your ticket reason in as few words as possible."></textarea>

我的JavaScript:

<div class="onoffswitch">
  <input type="checkbox" onchange="changeplh()" name="onoffswitch" class="onoffswitch-checkbox" value="1" id="myonoffswitch" checked>
  <label class="onoffswitch-label" for="myonoffswitch">
    <span class="onoffswitch-inner"></span>
    <span class="onoffswitch-switch"></span>
  </label>
  <script>
    function changeplh() {
      debugger;
      var sel = document.getElementById("myonoffswitch");
      var textbx = document.getElementById("problem");
      var indexe = sel.selectedIndex;
      if (indexe == 0) {
        $("#problem").val('');
        $("#problem").prop("placeholder", "age");
      }
      if (indexe == 1) {
        $("#problem").val('');
        $("#problem").prop("placeholder", "name");
      }
    }
  </script>
</div>

我特别需要的是一个复选框按钮,它将文本区域的占位符更改为两个不同的选项。EX:点击一下,上面写着"年龄";,再次点击它,它会说";name";,再次点击它,它会说";年龄;等等

您的代码有点乱(例如,您的代码中没有#problem),所以我只创建了一个更改placeholder的简单演示。

$('#problem').change(function() {
  $('textarea').attr('placeholder', $(this).is(':checked') ? 'name' : 'age');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="form-control" style="height:150px" name="techProblem" placeholder="Describe the issue in as few words as possible."></textarea>
<label><input type="checkbox" id="problem" /> Change placeholder</label>