0

我有这个代码，它只在第一次点击时从 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>
4

4 回答 4

1

从您的回答来看，您对 jquery 没问题，您可以尝试以下作为非常基本的占位符解决方案：

$('[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/

于 2013-01-07T10:10:43.580 回答
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>
于 2013-01-07T09:54:39.143 回答
0

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

var textareasAlreadyHit = new Array();

然后每次你：

function checkOnFocus(textarea)

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

于 2013-01-07T09:16:08.517 回答
0 
function checkOnFocus(textarea){
if(!flag)
textarea.value="";
flag=false;
}

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

这里有两个变化

1>checkOnFocus() 方法

flag=false;

2>resetInitialText() 方法

textarea.value='text';// make your own string to replace
于 2013-01-07T09:20:04.967 回答