单击后清除 TEXTAREA 值（onFocus）答案

【问题标题】：Clear TEXTAREA value after click (onFocus)单击后清除 TEXTAREA 值（onFocus）
【发布时间】：2011-02-17 18:34:14
【问题描述】：

我正在使用..

onfocus="this.value=''; return false;"

清除我的文本区域中的值以离开 cmets。但是，当您单击输入评论并输入一些内容时，如果您要在框外单击以阅读页面上的其他内容，然后再次单击 textarea 框内返回到您的评论，它会清除您当前的输入.

是否有清除初始点击时的文本区域只是为了清除默认值而不是浏览器页面会话其余部分的其余点击？

【问题讨论】：

标签： javascript html textarea onfocus

【解决方案1】：

最好将指令放入标签标签中，将其放置在 textarea 上方，然后在 textarea 获得焦点时将其隐藏或显示。这样做的原因是因为您的 textearea 将填充指令，如果它们在表单中，这些指令可能会被发送。

但是，解决你的问题，你所要做的就是：

onfocus="if(this.value== "your initial text"){this.value=''}; return false;"

【讨论】：

更好的版本是 onfocus="if(this.value=this.defaultValue){this.value=''}; return false;"
@KOGI 如果您输入内容然后在框外单击然后返回，您的代码将清除到目前为止输入的任何内容，这会导致原始问题。
@MadushM - 不，实际上不会。请注意if( this.value == this.defaultValue ) 的位，这是检查文本框的值是否与加载页面时的值相同。如果您更改了它，文本框将不会被清除。

【解决方案2】：

我认为将逻辑与内容分开是一个好习惯。所以，使用 jQuery（我们都使用 jQuery，对吗？）你可以这样做：

$(document).ready(function() {
    var _bCleared = false;
    $('form textarea').each(function()
    {
        var _oSelf = $(this);

        _oSelf.data('bCleared', false);
        _oSelf.click(function()
        {
            if (!_oSelf.data('bCleared'))
            {
                _oSelf.val('');
                _oSelf.data('bCleared', true);
            }
        });
    });
});

这将遍历站点上的所有文本区域，并在单独的数据绑定中存储有关其清除状态的布尔值。 onclick 事件也为每个 textarea 单独处理，因此您可以在单个页面上拥有多个 textarea / textarea 清除，而无需 Javascript 溅射您的 html。

【讨论】：

【解决方案3】：

这会有所帮助

function clearTA {
   if(this.value != "type here") {
      this.value = ''; 
      return false;
   }
}

和onfocus html属性

...onfocus="clearTA()"..

【讨论】：

【解决方案4】：

<script type="text/javascript">
function clearOnInitialFocus ( fieldName ) {
   var clearedOnce = false;
   document.getElementById( fieldName ).onfocus = (function () {
    if (clearedOnce == false) {
      this.value = '';
      clearedOnce = true;
    }
  })
}
window.onload = function() { clearOnInitialFocus('myfield');
</script>

来源：http://snipplr.com/view/2206/clear-form-field-on-first-focus/

【讨论】：

【解决方案5】：

我知道这已经很晚了，但是对于其他遇到此问题的人，我相信最简单的答案是

onfocus="this.value=''; this.onfocus='';"

应该完全按照您的意愿行事，而无需存储/检查任何变量。

【讨论】：

【解决方案6】：

改为使用 HTML5 的 placeholder 并为旧版浏览器使用 jquery 插件。

此处运行示例： http://jsfiddle.net/dream2unite/xq2Cx/

<input type="text" name="email" id="email" placeholder="name@email.com">

必须附有以下脚本：

$('input[placeholder], textarea[placeholder]').placeholder();

当您输入电子邮件时，您的文本（占位符）会消失，只有当您删除电子邮件时，文本（占位符）才会重新出现。

最后，一个用于占位符的 jquery 插件显然是一个很好的例子： http://mathiasbynens.be/demo/placeholder

【讨论】：

【解决方案7】：

您可以使用全局页面变量。

在元素上方的script元素中

var tracker = {};

稍后...

<textarea name="a" onfocus="if(!tracker[this.name]) { tracker[this.name]=true; this.value=''; } return false;">Placeholder text</textarea>

【讨论】：

【解决方案8】：

所以我认为您有一个预填充的值，例如“在此处输入您的文本”？尝试添加这个 javascript：

    function clearText(textarea,prefilled){
        if(textarea.value==prefilled)
            textarea.value="";
        return false;
    }

那么，您的输入应该是：在此处输入您的文字

这应该让你开始......

【讨论】：

【解决方案9】：

在 javascript 中声明一个变量 clearedOnce 为 false。在您的 onfocus 中，检查此变量。如果为假，则将其设置为真并清除您的文本区域。以后的所有点击都不会执行任何操作。代码：

onfocus='if (!clearedOnce) { this.value = ''; clearedOnce = true;} return false;'

【讨论】：