Question

以下是它的工作原理。在其自然状态下显示消息。当用户专注于textarea时，消息就消失了。如果用户关注的是textarea而不是消息显示。

我的问题是我只想在开始时显示消息，当且仅当文本字段中没有用户书写文本时才显示。即一旦用户开始输入，即使他没有专注于textarea，也不会显示消息并且用户文本仍然存在。如果用户在焦点失焦时清除textarea而不是消息显示。

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

以下是我的尝试。

 $(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

如果我理解正确，你希望占位符在textarea聚焦时消失，你可以使用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/

Answer 2

试试这个

<textarea placeholder="Enter your biography here"></textarea>

Answer 3

您的问题出现在以下块中，如果文本区域不为空，您正在清除文本区域，您不应该这样做，如果文本区域与某些默认文本匹配，则必须清除该文本区域。因此，用户输入的文本不会在焦点上清除。

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

1.默认情况下，插入一些默认文本 2.对焦时，如果文本区域为空，则插入默认值 3.如果文本区域值等于默认文本，则关注，然后清空文本区域。

试试这个。

＆＃13;

var DefaultText = "Please provide any feedback from your experience or/and any features you would like to be added or removed."

$('#temp').val(DefaultText);

$('#temp').focusout(function(event) {
  if ($(this).val() == '') $(this).val(DefaultText); // add default text if there is no text
});

$('#temp').focusin(function(event) {
  if ($(this).val() == DefaultText) // remove text only if it default text
    $(this).val('');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id='temp'></textarea>

＆＃13;

操纵textarea值，以便在各种情况下显示默认消息

3 个答案: