使用 Javascript 在文本区域内写入

Write inside text area with Javascript

提问by zdcobran

I am trying to write something in text area when I click on a link.

当我点击链接时，我试图在文本区域写一些东西。

function writeText(txt){
    document.getElementById("writeArea").innerHTML = txt;
}

I would like to pass html tag in place of txt as parameter to this function so that I can get image, link etc inside text area. Is it possible in Javascript? || JQuery will be good? Pre-thanks.

我想将 html 标记代替 txt 作为参数传递给此函数，以便我可以在文本区域内获取图像、链接等。在 Javascript 中可能吗？|| JQuery 会好吗？先谢过。

采纳答案by rahul

If you want to render some images and anchor tags on the screen then don't use a textarea. Use any other container like <div>, <span>, <p>etc.

如果你想在屏幕上渲染一些图像和锚标签，那么不要使用 textarea。使用任何其它容器一样<div>，<span>，<p>等。

$("#yourelementid").html(yourtext);

will put the text (in your case HTML) inside the element with id yourelementid

会将文本（在您的情况下为 HTML）放入 id yourelementid 的元素中

HTML

HTML

<p id="para1"></p>

jQuery

jQuery

var txt = "<a href='http://www.google.com'>Google</a>";
$("#para1").html(txt);

See a working sample

查看工作样本

回答by naugtur

Or if jquery tag was there for a reason:

或者如果 jquery 标签是有原因的：

$('#writeArea').val(txt);

回答by Sarfraz

You should use value:

你应该使用value：

document.getElementById("writeArea").value = txt;

回答by Jonathon Bolster

You can easily do it in jQuery if you just want to set the text of a textarea:

如果您只想设置 textarea 的文本，您可以在 jQuery 中轻松完成：

$("#yourid").val("hello");

See it working: http://jsfiddle.net/quQqH/

看到它工作：http: //jsfiddle.net/quQqH/

If you're looking to have HTML in it then it needs to be a container element (such as a div).

如果您希望在其中包含 HTML，则它需要是一个容器元素（例如div）。

// Html
<div id="yourid"></div>

//JavaScript
$("#yourid").html('<a href="#">My link</a>');

Otherwise, another option is to have a Rich Text Editor (like Yahoo Editor) so that it renders the HTML that's in the textarea input - this will make it user editable. This is slightly more complicated, as you'll need to include the correct files to make the editor work. Then just do something like the following:

否则，另一种选择是使用富文本编辑器（如Yahoo Editor），以便它呈现 textarea 输入中的 HTML - 这将使用户可以对其进行编辑。这稍微复杂一些，因为您需要包含正确的文件才能使编辑器工作。然后只需执行以下操作：

var myEditor = new YAHOO.widget.SimpleEditor('yourid', {
    height: '200px',
    width: '350px',
    toolbar: 0 // Hides the toolbar
});
myEditor.render();


$("#yourid").val("Click for <a href='http://yahoo.com'>Yahoo</a>");

You can see this working: http://jsfiddle.net/quQqH/1/. In this case, I've removed the toolbar by setting it to 0 but it is customisable to show different buttons, etc. Just remove that line to display the default toolbar.

你可以看到这个工作：http: //jsfiddle.net/quQqH/1/。在这种情况下，我通过将其设置为 0 来删除工具栏，但它可以自定义以显示不同的按钮等。只需删除该行即可显示默认工具栏。

回答by Anish Joseph

just give like this

就这样给

$("#ID").val("<img src='images/logo.png' />");

回答by Ari

If you want to write long text in the textarea, you can use this way:

如果你想在textarea中写长文本，可以这样使用：

HTML

HTML

<textarea id="theId"></textarea>

jQuery

jQuery

var a = 'Test textarea content. <a href="http://google.com">Google</a>" ';

$("#theId").val(a);

JS FIDDLE

JS小提琴