自动清除和重新填充文本区域值

Posted 2023-02-24

【中文标题】自动清除和重新填充文本区域值

【英文标题】：Auto Clear & Refill Texta Area Value

【发布时间】：2013-01-18 14:59:36

【问题描述】：

我有一个简单的表单，它使用 Value 来通知用户他们要在每个文本区域中放置什么。我已经能够使用这个 javascript 使文本区域自动清除：

<script type="text/javascript">
function setValue(field)

    if(''!=field.defaultValue)
    
        if(field.value==field.defaultValue)
        
            field.value='';
        
        else if(''==field.value)
        
            field.value=field.defaultValue;
        
    

</script>

如果用户没有填写文本区域并且他们不再选择它，我需要添加什么才能让值重新出现？这是表单标记，如果有帮助的话：

<form method="post" action="<?php echo $PHP_SELF; ?>">
<input type="text" name="first" value="First Name" class="slide-form-input" onfocus="setValue(this)" onblur="setValue(this)">
<input type="text" name="last" value="Last Name" class="slide-form-input" onfocus="setValue(this)" onblur="setValue(this)"> <br>
<input type="text" name="address" value="Address" class="slide-form-input" onfocus="setValue(this)" onblur="setValue(this)">
<input type="text" name="city" value="City" class="slide-form-input" onfocus="setValue(this)" onblur="setValue(this)"><br>
<input type="text" name="state" value="State" class="slide-form-input" onfocus="setValue(this)" onblur="setValue(this)">
<input type="text" name="zip" value="Zip" class="slide-form-input" onfocus="setValue(this)" onblur="setValue(this)"><br>
<input type="text" name="phone" value="Phone" class="slide-form-input" onfocus="setValue(this)" onblur="setValue(this)">
<input type="radio" name="day" value="Day"> Day  
<input type="radio" name="evening" value="Evening"> Evening <br>
<input type="text" name="email" value="Email" class="slide-form-input" onfocus="setValue(this)" onblur="setValue(this)">
<input type="submit" name="submit" value="Send Request" class="push_button blue">

（抱歉措辞不佳，时间还早！）

谢谢！ 对此的任何帮助将不胜感激。

【参考方案1】：

您正在寻找placeholder html5 属性

<input type="text" palceholder="First Name" />

http://jsfiddle.net/MesvN/

http://davidwalsh.name/html5-placeholder

【讨论】：

哦！这要容易得多，完全忘记了 html5 的占位符属性。谢谢！！