準確地獲取文本框中寫入的文本

-1

我有一個用於寫入消息的文本框。我想用div顯示寫在這個文本框中的文本。我這樣做，但只有文本是顯示，但格式不是當我寫入使用輸入，然後在預覽文本是相互顯示。未在下一行中顯示。準確地獲取文本框中寫入的文本

function limiter(){ 
 
    var tex = document.SendSms.msg.value; 
 
    $(".speech").html(tex); 
 
}

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

 
<form name='SendSms'> 
 
<textarea name="msg" id="msg" class="txtareabox" wrap='physical' onkeyup="limiter()" required ></textarea> 
 

 
<div id="mobilescreen"> 
 
    <div id="mobiletext"> 
 
    <p class="speech">See your preview here.. </p> 
 
    </div> 
 
</div>

來源

2017-02-14 jasneet bhatia

您需要更換'enter'（'\ N'，'\ r '，'\ n \ r''\ r \ n'）與'
'，但請注意樣式不可編輯。其他方面，你做'var text =「

」+ textarea.value +「

」'並用'

'替換'enter'並將其添加'div.innerHTML = text' – DomeTune

這裏是ypur問題的aproximation。認爲textarea中的\ n必須翻譯爲"<br/>"。

https://jsfiddle.net/qu0mcsd6/

這裏是js代碼：

function addText(){ 
    var tex = document.SendSms.msg.value; 
    tex = tex.replace(/\n/g, "<br>"); 
    $(".speech").html(tex); 
} 
$('#poner').click(addText);

感謝

來源

2017-02-14 09:51:25

在form標籤的name屬性已被廢棄，不應該使用（cf. spec），id應改爲使用。

function limiter() { 
    var tex = $("#msg").val(); // get the value of the form input (textarea) and store it in tex variable 
    $(".speech").html(tex); // set the value as innerHTML of the element(s) with 'speech' class 
}

來源

2017-02-14 09:47:27 laruiss

嘗試一下，然後發佈if它的工作原理.. –

雖然這段代碼片斷是受歡迎的，並且可以提供一些幫助，但它會[如果包括解釋]（/ meta.stackexchange.com/q/114762）* how *和*會大大改進*解決了這個問題。請記住，你正在爲將來的讀者回答這個問題，而不僅僅是現在問的人！請編輯您的答案以添加解釋，並指出適用的限制和假設。 –

你應該<br>在返回的值替換\n：

document.SendSms.msg.value.replace(/\n/g,"<br>");

注：由於您使用jQuery的你可以定義js代碼裏面的事件，我建議使用input事件，而不是keyup的，因爲當你跟蹤用戶輸入

$('#msg').on('input', function(){ 
    $(".speech").html($(this).val().replace(/\n/g,"<br>")); 
})

希望這有助於更高效。

$('#msg').on('input', function(){ 
 
    $(".speech").html($(this).val().replace(/\n/g,"<br>")); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form name="SendSms"> 
 

 
    <textarea name="msg" id="msg" class="txtareabox" wrap='physical' required ></textarea> 
 
    and the div in which i want to show my preview: 
 

 
</form> 
 

 
<div id="mobilescreen"> 
 
    <div id="mobiletext"> 
 
    <p class="speech">See your preview here.. </p> 
 
    </div> 
 
</div>

來源

2017-02-14 09:52:51

防止使用內聯'onkeyup'確實更好。 –

只需使用String.replace()到\ r \ n更改爲<br>。這裏是你如何做到這一點的ES6，只是使用VAR，而不是常量，讓向後兼容性

const textarea = document.querySelector("textarea"); 
 
const div = document.querySelector("div"); 
 
let text = textarea.innerHTML; 
 

 
text = text.replace(/\r?\n/g, '<br>'); 
 

 
div.innerHTML = text;

<textarea> 
 
Line 1 
 
line2 
 
line3 
 
</textarea> 
 
<div></div>

來源

2017-02-14 09:58:23 MennyMT

在答案的第一行中，您忘記使用''來跳過'
'代碼。 –

準確地獲取文本框中寫入的文本

回答

相關問題