修改文本框以使某些文本在使用占位符属性单击时消失

Question

我正试图修改网页上的一个文本框，以便在其中写入一些文本，一旦用户点击文本框输入信息，这些文本就会消失。我尝试过使用占位符属性，但没有成功。然后我尝试添加以下内容：(https://github.com/jamesallardice/Placeholders.js)为了使占位符起作用，它再次不起作用（文本框保持为空）。

我是一个使用InternetExplorer8编程的初学者。

这是代码：

<td colspan="3">    
    <textarea style="background: #F6E3CE; overflow:auto;" rows="3" cols="70" name="" id="" placeholder="Please enter your name here" onchange="commentsChanged(this,<?php echo $variable;?>);"><?php echo str_replace('rn', "n", rtrim($variable2[0][TitleTitle]));?></textarea>
</td>

如果缺少任何信息，请告诉我。

谢谢！

Answer 1

使用jQuery可以做到这一点：（我没有测试，但这不远）

<script type="text/javascript">
    $("input#text").focus(function(){
        if( $(this).val() == "default message" )
        {
            $(this).val("");
        }
    }).blur(function(){
        if( $(this).val() == "" )
        {
            $(this).val("default message");
        }
    });
</script>

Answer 2

或者不带jQuery:

HTML代码

<textarea onFocus="placeholder(this, ´focus´)" onBlur="placeholder(this, ´blur´)">Default value</textarea>

JavaScript代码

<script>
function placeholder(el, w) {

    if (el.value == "Default value" && w == "focus") el.value = "";
    if (el.value == "" && w == "blur") el.value = "Default value";

}
</script>