选择单选输入时修改占位符属性

Modify placeholder attribute when radio input is selected

本文关键字：占位符 属性 修改 单选 输入 选择      更新时间：2023-09-26

我正在尝试在选择单选按钮时更新HTML5占位符属性。我没有使用JQuery，所以更喜欢内联JavaScript解决方案。我知道我错过了一些简单的东西，但我正在努力自学！

<script type="text/javascript">
function ModifyPlaceHolder1 () {
var input = document.getElementById ("MyQuery");
input.placeholder = "Search books e.g. Harry Potter";
}
function ModifyPlaceHolder2 () {
var input = document.getElementById ("MyQuery");
input.placeholder = "Search journals e.g. New Scientist";
}
</script>

<input type="text" id="MyQuery" placeholder="Search resources" name="q" /> 
<input type="radio" value="" id="All" name="s.cmd" checked="checked" />
<label for="All">All</label>
<input type="radio" onclick="ModifyPlaceHolder1 ()" value="" id="Books" name="s.cmd" checked="checked" />
<label for="Books">Books</label>
<input type="radio" onclick="ModifyPlaceHolder2 ()" value="" id="Journals" name="s.cmd" checked="checked" />
<label for="Journals">Journals</label>

这是一种无需任何内联 JS 即可执行此操作的方法。一点点更干净，更容易跟踪(IMO(。

<input type="text" id="MyQuery" placeholder="Search resources" name="q" /> 
<input type="radio" value="" id="All" name="s.cmd" checked="checked" />
<label for="All">All</label>
<input type="radio" value="" id="Books" name="s.cmd" checked="checked" />
<label for="Books">Books</label>
<input type="radio" value="" id="Journals" name="s.cmd" checked="checked" />
<label for="Journals">Journals</label>
var books = document.getElementById("Books");
var journals = document.getElementById("Journals");
var input = document.getElementById("MyQuery");
books.onclick = function() {
    input.placeholder = "Search books e.g. Harry Potter";
}
journals.onclick = function() {
    input.placeholder = "Search journals e.g. New Scientist";
}

我会用一个函数对它进行编程，如下所示：

<script>
function ModifyPlaceHolder(element) {
  var data = {
    All: 'Search resources',
    Books: 'Search books e.g. Harry Potter',
    Journals: 'Search journals e.g. New Scientist'
  };
  var input = element.form.MyQuery;
  input.placeholder = data[element.id];
}
</script>
<form>
  <input type="text" id="MyQuery" placeholder="Search resources" name="q"> 
  <label for="All"><input type="radio" onclick="ModifyPlaceHolder(this)" id="All" name="s.cmd" checked> All</label>
  <label for="Books"><input type="radio" onclick="ModifyPlaceHolder(this)" id="Books" name="s.cmd"> Books</label>
  <label for="Journals"><input type="radio" onclick="ModifyPlaceHolder(this)" id="Journals" name="s.cmd"> Journals</label>
</form>

请注意：

  1. 并非所有使用的浏览器都支持占位符属性
  2. 标签元素应该真正包装它们应用到的控件，否则某些浏览器将无法正确关联它们。包装也意味着标签充当按钮的一部分，因此单击标签也会检查按钮。
    3. 一次只能选中一个单选按钮
  3. ，因此只能将一个单选按钮设置为默认选中按钮。
  4. 将控件放在窗体中可以使它们更易于访问。

当您看到一个元素中包含的相同侦听器的字符串时，您可以将单个侦听器放在父元素上。搜索"事件委派"。

试试这个：

<script>
  function ModifyPlaceHolder(element) {
      var data = {
              All: 'Search resources',
              Books: 'Search books e.g. Harry Potter',
              Journals: 'Search journals e.g. New Scientist'
          };
     var input = document.getElementById("MyQuery");
     input.placeholder = data[element.id];
}
</script>
相关文章：