當選擇無線電輸入時修改佔位符屬性

Question

我試圖在選擇單選按鈕時更新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> 

Answer 1

這是一種不使用任何內聯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"; 
} 

Answer 2

我將它與下面一個單一的程序：

<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. 未使用支持所有瀏覽器的佔位符attribtue
2. 標籤要素真包裝它們適用的控件，否則某些瀏覽器將無法正確地關聯它們。包裝也意味着標籤作爲按鈕的一部分，因此點擊標籤也會檢查按鈕。
3. 一次只能檢查一個單選按鈕，因此只能選擇一個作爲默認值。
4. 將控件放在表單中可以更容易地訪問。

當您看到一個包含在一個元素中的相同偵聽器的字符串時，您可以將單個偵聽器放在父元素上。搜索「事件代表團」。

Answer 3

試試這個：

<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>