使用 Javascript 在文本区域内写入

Posted 2023-05-07

【中文标题】使用 Javascript 在文本区域内写入

【英文标题】：Write inside text area with Javascript

【发布时间】：2011-05-19 15:20:15

【问题描述】：

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

function writeText(txt)
    document.getElementById("writeArea").innerhtml = txt;

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

【问题讨论】：

您的功能满足您的要求。您可以使用简单的字符串或 html 标记作为 txt 变量中的字符串。 jQuery 在内部使用您在此处使用的相同机制。

【参考方案1】：

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

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

【参考方案2】：

你应该使用value:

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

【讨论】：

hmm... 但是当我通过 txt = "这就是我 <a href="/default/index/tourl?u=PGEgaHJlZj0iaHR0cDovL3d3dy55YWhvby5jb20%3D" rel="nofollow" target="_blank">yahoo.com'&gt;Yahoo</a> 在这里有趣不得不说的" ; 那么 <textarea id="writeArea"> 里面的输出是： - 这就是我 <a href="/default/index/tourl?u=PGEgaHJlZj0iaHR0cDovL3d3dy55YWhvby5jb20%3D" rel="nofollow" target="_blank">yahoo.com'&gt;Yahoo</a> is here Funny不得不说的；但我想在那里看到链接。</textarea>

@user510050：那是不可能的。 HTML 不会在 <textarea>'s 中呈现。

【参考方案3】：

如果你想在屏幕上渲染一些图像和锚标签，那么不要使用文本区域。使用任何其他容器，例如 <div>、<span>、<p> 等。

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

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

HTML

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

jQuery

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

查看working sample

【讨论】：

谢谢拉胡尔，现在我明白了。

【参考方案4】：

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

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

看看它是否正常工作：http://jsfiddle.net/quQqH/

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

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

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

否则，另一种选择是拥有一个富文本编辑器（如Yahoo Editor），以便它呈现文本区域输入中的 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>");

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

【讨论】：

感谢您的回答。但是，在那个文本区域，我想做的是： - $("#yourid").val("hello yahoo.com'>Yahoo is here!");我想通过这个，并希望在文本区域内获得指向 Yahoo 端的链接。

如果你想要一个可编辑的框，那么你需要使用 TinyMCE (tinymce.moxiecode.com) 之类的东西来进行所见即所得的编辑。但是，如果您只是想向页面添加链接，那么 <textarea> 应该是一个 HTML 容器，例如 div。

我已经更新了我的答案以展示富文本编辑的示例。

【参考方案5】：

就这样给吧

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

【参考方案6】：

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

HTML

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

jQuery

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

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

JS FIDDLE