javascript - 如何在文本区域中换行？

Question

关闭。此题需要 details or clarity 。目前不接受答案。

---

想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题.

已关闭 5 年前。

Improve this question

在下面的示例中，我尝试使用每个 auto 将文本写在新行上。重复。我以为那会是“\n”，但我没有成功。有人可以帮忙吗？非常感谢!!

textareaStatus = document.body.appendChild( document.createElement( 'textarea' ) );
textareaStatus.style.cssText = 'display: block; font-size:small; width: ' +  0.95 * window.innerWidth + 'px; ' + 'color: black; ' + 'background:#ffffff ';
textareaStatus.rows =  5;
textareaStatus.value = '';

 

WriteElement.onclick = function writeText() {
var text = ( "123" +" "+ "123" +" "+ "123" +" "+ "123" +" "+ "123" +" "+ "123" + "\n" ).toString();      
     
setTimeout(function(){
document.getElementById("WriteElement").click();
}, 1000);      
      
textareaStatus.value = text;
}
    
StopElement.onclick =function stopText() {
clearTimeout();
}		

ClearElement.onclick = function clearText() {		
textareaStatus.value = '';
}

<button id="WriteElement" onclick="WriteElement()">Record</button>
<button id="StopElement" onclick="StopElement()" >Stop</button>
<button id="ClearElement" onclick="ClearElement()">Clear</button>

Answer 1

\n 确实有效，但是您在每次新调用函数时都会清除文本区域，因此您永远不会看到添加的第二组数据。更改:

textareaStatus.value = text;

至:

textareaStatus.value += text;

解决了这个问题。

您也没有对 setTimeout 计时器的变量引用，因此您的 clearTimeout() 调用永远不会起作用。

而且，您有一个具有相同名称的元素和函数，这不是一个好主意。另外，在 JavaScript 中，标识符通常以“驼峰命名法”编写。 “PascalCase”通常保留用于“构造函数”。

此外，您不应使用 HTML 事件属性(onclick 等)设置事件处理程序。 100 年前就是这样做的，有 many reasons to never do it今天。相反，请使用现代标准并将 HTML 与 JavaScript 分开。

最后一件事，您不需要在 JavaScript 中设置文本区域的样式。您设置的所有内容都可以而且应该在 CSS 中完成。

更改这些内容以使代码正确，您可以看到 \n 工作得很好(阅读每个解释的注释)；

// Get the DOM references you will need just once:
var btnWrite = document.getElementById("writeElement");
var btnStop = document.getElementById("stopElement");
var btnClear = document.getElementById("clearElement");

// Set up event handling the modern, standards-based way:
btnWrite.addEventListener("click", writeData);
btnStop.addEventListener("click", stopText);
btnClear.addEventListener("click", clearText);

textareaStatus = document.body.appendChild( document.createElement( 'textarea' ) );

var timer = null; // need variable to reference timer

function writeData() {
  var text = "123 ".repeat(6) + "\n";  // Much simpler way to set up your string
  timer = setTimeout(writeData, 1000); // Assign a variable to all timers so they can be accessed later 
  textareaStatus.value += text;        // Use += to append a new value on to an existing one
}
    
function stopText() {
  clearTimeout(timer);  // You must pass a reference to the timer you want cleared
}		

function clearText() {		
  textareaStatus.value = '';
}

/* Try to do all your styling in CSS */
textarea {
  display: block; 
  font-size:small;
  width:95vw;  /* vw is viewport width and the number you use is a percentage of it */
  height:5em;  /* 1em === 100% of the inherited font size */
}

<button id="writeElement">Record</button>
<button id="stopElement">Stop</button>
<button id="clearElement">Clear</button>