Question

脚本＃1：

<textarea></textarea>

$('textarea').each(function() {
  var $placeholder = "First line\nSecond one";
  console.log('[function] shikamo__edit_placholder, data-placeholder: ' + $placeholder);

  $(this).attr('value', $placeholder);
  $(this).focus(function(){
      if($(this).val() == $placeholder){
          // reset the value only if it equals the initial one    
          $(this).attr('value', '');
      }
  });
  $(this).blur(function(){
      if($(this).val() == ''){
          $(this).attr('value', $placeholder);
      }    
  });
  // remove the focus, if it is on by default
  $(this).blur();
});

返回

<textarea>First line
Second one</textarea>

脚本＃2：

<textarea data-placeholder="First line\nSecond one"></textarea>

$('textarea').each(function() {
  var $placeholder = $(this).attr('data-placeholder');
  console.log('[function] shikamo__edit_placholder, data-placeholder: ' + $placeholder);

  $(this).attr('value', $placeholder);
  $(this).focus(function(){
      if($(this).val() == $placeholder){
          // reset the value only if it equals the initial one    
          $(this).attr('value', '');
      }
  });
  $(this).blur(function(){
      if($(this).val() == ''){
          $(this).attr('value', $placeholder);
      }    
  });
  // remove the focus, if it is on by default
  $(this).blur();
});

返回

<textarea data-placeholder="First line\nSecond one">First line\nSecond one</textarea>

如何通过换行符获得相同的结果

<textarea data-placeholder="First line\nSecond one">First line
Second one</textarea>

脚本＃2中的

？

Answer 1

使用@Ishita的回答

$(this).attr('value', ($placeholder.replace(/\\n/g, "\n")));

修改

它是因为当您从占位符属性中读取属性时，它不会被视为换行符，而是作为常规\n字符串。如果你把那个字符串改回换行符，你就在家里。

Answer 2

使用

<br/> instead of /n

或者如果你要渲染一个字符串，

replace /n with <br/>
// this is code for string replacement
replace(/\n/g, "<br />");

基本上，写下这段代码

  $(this).attr('value', ($placeholder.replace(/\n/g, "<br />")));

字符串中的换行符

2 个答案: