設置文本基於表單<select>值

Question

我有一個形式如下<select>：

<select style="width: 100px; text-align: center;"> 
    <option value="email">Email</option> 
    <option value="telephone">Phone</option> 
</select> 

默認選項爲Email所以下面<input>是顯示：

<p class="email_form">Please supply your Email Address</p> 
<input onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;" style="width: 270px" type="email" name="email" id="email" value="jose.gonzalez@hotmail.com"> 

然而，如果他們選擇telephone我想改變上面的要求電話號碼？

Answer 1

最快的方法是給予 '標籤' 段落中（更通用）ID，以及：

<p id="contact_method">Please supply your Email Address</p> 

document.getElementById("selectId").onchange = function() { 
    var value = this.options[this.selectedIndex].value; 
    var p = document.getElementById("contact_method"); 
    if(value == 'telephone') { 
     p.innerHTML = 'Please supply your phone number'; 
    } else { 
     p.innerHTML = 'Please supply your email address'; 
    } 
} 

嘗試一下這裏：http://jsfiddle.net/29w2G/

Answer 2

如果您使用HTML5無論如何，爲什麼不只是使用input元素的placeholder屬性而不是input onfocus的東西？然後，您可以使用JavaScript回退，使其在不支持該瀏覽器還沒有工作，像this one：

/** 
* Add this script to the end of your document that use <input autofocus type="text" /> 
* or <input type="text" placeholder="username" /> and it'll plug support for browser 
* without these attributes 
*/ 
(function() { 

function each(list, fn) { 
var l = list.length; 
for (var i = 0; i < l; i++) { 
    if (fn.call(list[i], list[i], i, list) === false) { 
    break; 
    } 
} 
} 

var addEvent = (function() { 
if (document.addEventListener) { 
    return function (el, type, fn) { 
    if (el && el.nodeName || el === window) { 
    el.addEventListener(type, fn, false); 
    } else if (el && el.length) { 
    for (var i = 0; i < el.length; i++) { 
    addEvent(el[i], type, fn); 
    } 
    } 
    }; 
} else { 
    return function (el, type, fn) { 
    if (el && el.nodeName || el === window) { 
    el.attachEvent('on' + type, function() { 
    return fn.call(el, window.event); 
    }); 
    } else if (el && el.length) { 
    for (var i = 0; i < el.length; i++) { 
    addEvent(el[i], type, fn); 
    } 
    } 
    }; 
} 
})(); 

var i = document.createElement('input'), 
    inputs = [].slice.call(document.getElementsByTagName('input'), 0); 

inputs = inputs.concat([].slice.call(document.getElementsByTagName('textarea'), 0)); 

if (!('placeholder' in i)) { 
// placeholder fix 
each(inputs, function (el) { 
    // note - we're using el instead of this across the board because it compresses better 
    var lastValue = el.value, placeholder = el.getAttribute('placeholder'); 

    var focus = function() { 
    if (el.value == placeholder) { 
    el.value = ''; 
    el.style.color = ''; 
    } 
    }; 

    var blur = function() { 
    if (el.value == '') { 
    el.value = placeholder; 
    el.style.color = '#A29797'; 
    }; 
    }; 

    addEvent(el, 'focus', focus); 
    addEvent(el, 'blur', blur); 

    // remove the placeholder if the page is reload or the form is submitted 
    addEvent(el.form, 'submit', function() { focus.call(el); }); 
    addEvent(window, 'unload', function() { focus.call(el); }); 

    // set the default state 
    if (el.value == '') { 
    blur.call(el); 
    } 
}); 
} 

if (!('autofocus' in i)) { 
// auto focus 
each(inputs, function (el) { 
    if (el.getAttribute('autofocus') != null) { 
    el.focus(); 
    return false; // "there can only be one" 
    } 
}); 
} 

})(); 

如果你使用jQuery，你可以用我的HTML5 placeholder jQuery plugin。