手动写入后无法使用 javascript 更新 textarea

Posted 2023-05-07

【中文标题】手动写入后无法使用 javascript 更新 textarea

【英文标题】：Can't update textarea with javascript after writing to it manually

【发布时间】：2010-12-28 00:12:12

【问题描述】：

我正在编写一个在线应用程序，将一些文本保存到数据库中。 有 5 个“textarea”-s 和 5 个“input type=text”-s。 我还实现了搜索以轻松查找和编辑数据库条目。将显示一个新的选择窗口（使用原型和 ajax），当单击它的任何条目时，会填充下面的表单（它与用于添加新结果的表单相同）。 现在这就是问题出现的地方...... 如果我添加一个新表单或编辑任何现有的所有已修改的所有 TEXTAREA 字段，被锁定或类似的东西（只有文本区域，输入仍然有效）......他们将不再遵守 javascripts .update，所以他们不当我选择下一个条目时不会改变....或者至少他们不会在 FireFox 中（3.5.something）。它在 IE 中运行良好，但由于我是 FF 用户并且我不希望它在那里工作，我想知道是否有人遇到过任何类似的问题并轻松解决它。 当我调用 form.reset() 时问题似乎消失了，但这会弄乱一些代码生成的选择/选项字段，此外我不想保留数据。

在我看来，FF 认为我输入的文本比 javascript 试图输入的文本更重要，所以它会覆盖它......我不知道为什么。在这一点上，我责怪 .update()，但我不知道该怎么做。 INPUT 字段似乎与 .update 有问题（或者它对我不起作用），所以我不得不将它们重写为 .value= （也尝试过使用 textareas 的 .value ，希望可以解决任何问题，遗憾的是没用）。

那么，有没有人知道为什么会发生这种情况以及如何解决它，而不必在每一步都重置表单？

【问题讨论】：

你能提供一些代码给我们看看吗？

不再需要了，问题出在 .update() ... 我尝试了 innerhtml，它运行良好，只是为了踢我再次尝试 .value，它突然运行...我不知道昨天发生了什么（当我花了整个下午在这上面），它不想像它那样工作（我可能使用了 .text 而不是 .value，或者 php iduno 中有一些错误）无论如何很抱歉无故打扰大家

我认为你应该对自己的问题发表一个答案（只是说上面）然后检查它，这样这个问题就可以从未回答的问题队列中删除

【参考方案1】：

我遇到了同样的问题。当HTML解析为DOM对象时，textarea的内容为innetHTML的innetHTML<textarea>

<textarea cols="10" rows="10">Content of textarea</textarea>

值document.getElementByTagName('textarea').innerHTML 和document.getElementByTagName('textarea').value 返回相同的值Content of textarea

但在加载 DOM 对象后，更改 innerHTML 值不会更改 textarea 框的内容。更改它的解决方案是修改 value 字段。

document.getElementByTagName('textarea').value="New content of textarea";

或在 jquery 中

$("textarea").val("New content of textarea");

【参考方案2】：

.value 和 .innerHTML 似乎解决了这个问题

【讨论】：

由于某种原因，我不知道您需要将 textarea 的值设置为实际值。所以它与 HTML 不同。如果你想在 html 中给 textarea 一个值，你需要把你的值放在 textarea 标签之间。在 JS 中，您需要设置该值。所以请遵循：HTML：<textarea>Your value</textarea> JS：document.getElementsByTagName("textarea")[0].value = "your value"

【参考方案3】：

我有这个确切的问题。到目前为止我已经尝试过

$('#addofferlink').click(function()
    var offer = "#OFFER_"+$('#offer_id').val()+"#";
    $('#message').append(offer);
);

我也试过了，

    $('#addofferlink').click(function()
    var e = $('#message').html();
    var offer = "#OFFER_"+$('#offer_id').val()+"#";
    $('#message').html(e+offer);
);

问题似乎在于，如果用户在文本区域 (#message) 中键入内容，然后单击按钮添加优惠链接，则不会显示任何内容。查看源码，使用Firebug，我可以看到textarea中包含的实际文本正在被修改，但没有显示在屏幕上。

似乎 javascript 正在更改标记的 html 内容，但浏览器正在将当前键入的内容存储在内存中（我假设）或其他地方。

使用 val(e+offer) 更新 textarea 将删除输入的文本并用 offerlink 替换它，使用 innerHTML = e+offer 根本不起作用，显示 textarea 没有变化。

---

我已经整理好了！

我的想法围绕着这样一个事实，因为标签包含文本，并且有它自己的结束标签，所以我必须使用 .html() 来获取它的内容。

通过使用 .val() 获取字段的内容，您可以简单地提取和更新内容。我最终得到了以下结果，

    $('#addofferlink').click(function()
    var e = $('#message').val();
    var offer = "#OFFER_"+$('#offer_id').val()+"#";
    $('#message').val(e+offer);
);

【参考方案4】：

我只是通过以下方式解决了这个奇怪的问题：

document.forms[0].text_area_name.value = "STUFF";

即使修改了文本区域，脚本也会覆盖。

innerHTML 在修改 textarea 后对我不起作用。

【参考方案5】：

.innerHTML ：指的是写在标签之间的内容。 这里，文本正在被写入文本区域，这会更改与 .innerHTML 关联的值，因此可以使用 .value 来获取更新的内容。

【参考方案6】：

有时您可能希望在文本区域中显示一个特定的字符串，然后让 用户看到它是什么，然后可能对其进行更改；但是，你希望 让他们看到原文是什么。文本区域非常笨拙， 但使用此设置，即使手动更改已编辑的文本也是可逆的。

<button id="ShowNOWxItmDscptn" onClick="EditItmDesc(1)">What is it now?</button>
<button id="OpnTAxWriteNewEdit" onClick="EditItmDesc(2)">Write / Edit</button>
<textarea id="RUBYxDescribe" max="500"  placeholder="Magic"> </textarea>

// a global variable:
// UVarDescriptionTxt = ("This is the first line.\r\nSecond line!");

function EditItmDesc(x)
    console.log("*x* = "+x+".");
    console.log("Text to reset : "+UVarDescriptionTxt+".");

    var InnyShow = document.getElementById("RUBYxDescribe");
    InnyShow.value = UVarDescriptionTxt;

    if(x == 1) 
        InnyShow.innerHTML = "";
        InnyShow.textContent = "";
        InnyShow.innerHTML = UVarDescriptionTxt;
    

    if(x == 2)
        InnyShow.value = "";
    

上述结构为我解决了这个问题。