Question

使用以下示例我尝试使用每个auto在新行上写入文本。重复。我认为这将是＆＃34; \ n＆＃34;但我没有成功。有人可以帮忙吗？非常感谢!!

＆＃13;

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 = '';
}

＆＃13;

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

＆＃13;

Answer 1

将textareaStatus.value = text;更改为textareaStatus.value += text;：

＆＃13;

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 = '';
}

＆＃13;

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

＆＃13;

Answer 2

\n确实有效，但是每次调用函数时都会清除textarea，这样你就不会看到添加的第二组数据了。改变：

textareaStatus.value = text;

为：

textareaStatus.value += text;

解决了这个问题。

您还没有对setTimeout计时器的变量引用，因此您的clearTimeout()来电永远不会有效。

而且，你有一个具有相同名称的元素和功能，这不是一个好主意。此外，在JavaScript中，标识符通常用“camelCase”编写。 “PascalCase”通常保留用于“构造函数”。

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

最后一件事，你不需要在JavaScript中设置textarea样式。您正在设置的所有内容都可以并且应该在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>

如何在textarea中换行？

2 个答案: