簡體   English   中英

在textarea中保持輸入連續2個換行符(提交前預覽div)

[英]keep input to 2 line breaks consecutively in textarea (preview div before submit)

我想做的是允許2個換行符進行格式化,但是阻止3個或更多行顯示(在提交前先預覽,所以不能用php剝離掉)

我開始

var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';    
return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n){2,}/g, '$1'+ breakTag +'$2');

我嘗試添加{2,}

var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';    
return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n){2,}/g, '$1'+ breakTag +'$2');

<textarea>

this is user input
i have inserted 1 line break


i have inserted 3 line breaks



i have inserted 4 line breaks

我想要的是

this is user input
i have inserted 1 line break

i have inserted 3 line breaks

i have inserted 4 line breaks

我得到的是

this is user inputi have inserted 1 line break
i have inserted 3 line breaks
i have inserted 4 line breaks

如果沒有{2,},則顯示為輸入

如果我們可以阻止他們在文本區域開始時連續輸入兩個以上的換行符,並在預覽時對其進行清理,則可以提高獎勵

*編輯*

$('textarea').keyup(function()
{
    var myString = $(this).val();
    myString = nl2br(myString);
    $('#preview').html(myString);
});

function nl2br (str, is_xhtml)
{
    var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';    
    return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1'+ breakTag +'$2');
}

這是替換兩個文本區域中的值並將<br />插入div中的代碼。 這不是在jQuery的上下文中,但是您不必將其用於類似這樣的事情。 不過,轉換為jQuery應該很簡單。
編輯:如果textarea為空,則避免錯誤。

<script>
function oneBreak(ta) { 
  outDiv = document.getElementById('outDiv'); 
  if (ta.value.length <= 0) {
    outDiv.innerHTML = '';
  } else {
    var val = ta.value + "";
    var ln = "\n";
    //normalize line breaks
    if (val.match(/(\r\n)/g)) ln = "\r\n";
    else if (val.match(/\r/g)) ln = "\r";
    val = val.replace(/(\r\n)/g,"\n");
    val = val.replace(/\r/g,"\n");
    val = val.replace(/(\s*\n{3,})+/g,"\n\n")
    // return to default line breaks
    ta.value = val.replace(/\n/g,ln);
    outDiv.innerHTML = val.replace(/\n/g, "<br />");
  }
  return outDiv.innerHTML; 
}
</script>

<textarea id="breaks" onKeyUp="oneBreak(this);" onChange="oneBreak(this);"></textarea>

<div id="outDiv"></div>

編輯2:添加僅空格行刪除。 JS小提琴: http : //jsfiddle.net/2T2gv/

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM