javascript - 操纵文本区域值，以便在各种情况下显示默认消息

Question

这是它的工作原理。在其自然状态下会显示一条消息。当用户将注意力集中在文本区域时，消息就会消失。如果用户焦点移出文本区域，则会显示消息。

我的问题是，我只希望在开始时显示消息，并且当且仅当文本字段中没有用户编写的文本时显示。也就是说，一旦用户开始键入，即使他没有将注意力集中在文本区域上，消息也不会显示，并且用户文本仍然存在。如果用户清除文本区域，则在失去焦点时会显示消息。

我的问题是确保用户输入一些信息后不会显示该消息。

以下是我尝试过的。

 $(function() {

      // Initiate the textarea placeholder content
      if($(".more").val() != '') {

        var content = "Please provide any feedback from your experience or/and any features you would like to be added or removed.";
      // Empty it's value upon select
      $(".more").val(content);
      }
        $(".more").focus(function(event) {
            // Erase text from inside textarea

            if($(this).val() != '') {
              $(".more").val('');
          }
        });

        // Display the placeholder when the textarea is out of focus. Ensure that its empty.
        $(".more").focusout(function(event) {
          // Erase text from inside textarea
          if($(this).val() == '') {
            $(this).val("Please provide any feedback from your experience or/and any features you would like to be added or removed.");
          }

      });
    });

Answer 1

如果我理解正确的话，您希望占位符在文本区域聚焦时消失，您可以使用 CSS 来实现这一点。我在工作中经常使用它，这是一种很好的微妙的接触。

/* set placeholder to transprent on focused elements:  */
:focus::-webkit-input-placeholder { color: transparent; }
:focus::-moz-placeholder { color: transparent; }
:focus:-ms-input-placeholder { color: transparent; }

注意:您必须使用单独的规则来让不同的 css 解析器满意。

现场演示:http://pagedemos.com/nm2c6753g3r8/