代码：

Question

我有这个代码，只有在第一次点击时才能从textarea 中删除文本。只有在我写下第二个textarea标签时才能正常工作：
<textarea id="textarea2" onfocus="checkOnFocus(this);" onblur="resetInitialText(this);">Your second message</textarea>

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
  var flag = false;

  function setInitialText() {
    var textarea = document.getElementById('textarea');
    if (textarea.value == "") {
      textarea.value = text;
    }
  }

  function checkOnFocus(textarea) {
    if (!flag) textarea.value = "";
    flag = true;
  }

  function resetInitialText(textarea) {
    if (textarea.value == "") {
      textarea.value = text;
      flag = false;
    }
  }
</script>
</head>
<body onload="setInitialText();">
  <textarea id="textarea" onfocus="checkOnFocus(this);" onblur="resetInitialText(this);">Your first message</textarea>
  <textarea id="textarea2" onfocus="checkOnFocus(this);" onblur="resetInitialText(this);">Your second message</textarea>
</body>
</html>

Answer 1

我终于找到了如何做我的要求：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title></title>  
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>
<script type='text/javascript'>//<![CDATA[ 

$(function() {
    $("textarea").focus(function(event) {

          // Erase text from inside textarea
        $(this).text("");

          // Disable text erase
        $(this).unbind(event);
    });
});
//]]>  

</script>


</head>
<body>
  <textarea rows="5" cols="30">Enter text here.</textarea>
  <textarea rows="5" cols="30">Enter text here.</textarea>
</body>
</html>

Answer 2

从你的回答中可以看出，你可以使用jquery，你可以尝试以下作为一个非常基本的占位符 -solution：

$('[data-placeholder]').each(function () {
  var placeholder = $(this).data('placeholder');

  $(this).val(placeholder).on({
    focus: function () {
      $(this).val(function (_, value) {
        return value === placeholder ? '' : value;
      });
    },

    blur: function () {
      $(this).val(function (_, value) {
        return value === '' ? placeholder : value;
      });
    }
  });
});

使用：

<textarea data-placeholder="Your first message"></textarea>
<textarea data-placeholder="Your second message"></textarea>

http://jsbin.com/iyobiy/1/

Answer 3

您只有一个（全局）标志和两个textareas，因此在进行第二次调用时，该标志已设置为true。考虑使用数组或字典类型结构来创建通用实现。一种选择是在全局范围内使用数组：

var textareasAlreadyHit = new Array();

然后每次你：

function checkOnFocus(textarea)

检查数组是否包含textarea的id，而不是检查标志。如果是的话，什么也不做。如果没有，请从textarea中删除文本，并将textarea的id添加到数组中。

Answer 4

function checkOnFocus(textarea){
if(!flag)
textarea.value="";
flag=false;
}

function resetInitialText(textarea){
if(textarea.value==""){
textarea.value='text';
flag=false;
}

这里有两个变化

1＆gt;检查OnFocus（）方法

flag=false;

2＆gt; resetInitialText（）方法

textarea.value='text';// make your own string to replace

仅在第一次单击时从多个textareas中删除文本

代码：

4 个答案: