如何在外部文档中使用 javascript 将 textarea 的内容保存为变量?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/12327883/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 15:56:22  来源:igfitidea点击:

How can I save the contents of a textarea as a variable using javascript in an external document?

javascripthtmltextarea

提问by zch

I have tried, as many have suggested, saving a variable as the .valueor .innerHTMLof an ID, found by using document.getElementById. Here is all of my HTML:

正如许多人所建议的那样,我已经尝试将变量保存为ID的.value.innerHTML,通过使用document.getElementById. 这是我所有的 HTML:

<html>
<head>
<title>write</title>
<script type="text/javascript" src="g.js"></script>
<link rel="stylesheet" type="text/css" href="g.css" />
</head>

<body>
<div id="box">
    <textarea id="txt" placeholder="placeholder. type here.">text text</textarea>
</div>  
</body> 
</html>

and here is my javascript, currently meant to fire an alert that contains the text in the text area – right now that would be, text text:

这是我的 javascript,目前打算触发一个警报,其中包含文本区域中的文本——现在是text text

function run(){
var txt = document.getElementById('txt');

alert(txt);}

run()

Right now, loading the page fires an alert with the text Nulland adding .valueafter getElementById('txt')results in no alert. Many thanks in advance.

现在,加载页面会触发带有文本的警报,Null.valuegetElementById('txt')导致没有警报后添加。提前谢谢了。

回答by Jesse

The problem is that your javascript is executing before the DOM is constructed. When you load the JavaScript file in the <head>of the document, it is executed immediately, before the <textarea>tag has been created.

问题是您的 javascript 正在构建 DOM 之前执行。当您加载文档中的 JavaScript 文件时<head>,它会<textarea>在创建标记之前立即执行。

Try moving your script block below the textarea, just before the </body>tag.

尝试将您的脚本块移动到 textarea 下方,就在</body>标记之前。

Here's an example: fiddle

这是一个例子:小提琴

After the DOM is constructed you can use getElementByIdjust as have and can access the contents of the textarea with the valueattribute. All of this is in the fiddle above.

在构建 DOM 之后,您可以getElementById像 have 一样使用并且可以使用该value属性访问 textarea 的内容。所有这些都在上面的小提琴中。

Alternatively, you can wrap your run()method call with a library that provides an event when the DOM becomes ready. jQuery's example would be:

或者,您可以run()使用一个库包装您的方法调用,该库在 DOM 准备就绪时提供一个事件。jQuery 的例子是:

$(function () {
  // code you want to execute when the DOM is ready.
  run();
});

回答by Sibu

function run() {
  var txt =  document.getElementById("txt").value;

  alert(txt);
 }

 $(document).ready(function(){
            run();
 });

check this jsfiddle link

检查这个jsfiddle链接

You are not getting textarea value because your javscript function is getting executed before there's value in DOM

你没有得到 textarea 值,因为你的 javscript 函数在 DOM 中有值之前被执行

or using javascript

或使用 javascript

function run(){
var txt =  document.getElementById("txt").value;

alert(txt);
}


window.onload = run();

More about window.onload

更多关于window.onload

回答by jjm

The javascript below works in firefox. In fact, if you click the answerbutton for this question, you can try it out in firebugon this very page...

下面的 javascript 在 Firefox 中有效。事实上,如果你点击answer这个问题的按钮,你可以在这个页面上的firebug 中试一试......

var textArea = document.getElementById("wmd-input"); // #wmd-input is the text input where your answer goes...
alert( textArea.value );

Make sure you enter some text first, of course.

当然,请确保先输入一些文本。

While you're at it, you should give jQuery a try:

当你在做的时候,你应该试试 jQuery:

alert( $("#wmd-input").val() );

Or better yet,

或者更好的是,

console.log($("#wmd-input").val());

Hope that helps.

希望有帮助。