Javascript 使用 HTMLEditorExtender 设置 TextBox 的值答案

【问题标题】：Javascript set value of TextBox with HTMLEditorExtenderJavascript 使用 HTMLEditorExtender 设置 TextBox 的值
【发布时间】：2012-11-07 18:42:57
【问题描述】：

我有一个带有 HTMLEditorExtender 的 asp.net 文本框（ID = "HTMLTextBox_Comments"）：

<asp:TextBox ID="HTMLTextBox_Comments" runat="server" Height="200px" Rows="5" 
        TextMode="MultiLine" Width="469px"></asp:TextBox>
<ajaxToolkit:HtmlEditorExtender ID="HTMLTextBox_Comments_HtmlEditorExtender" 
        runat="server" Enabled="True" TargetControlID="HTMLTextBox_Comments">
</ajaxToolkit:HtmlEditorExtender>

我正在使用这样的 javascript 设置文本框的值：

var MyControl = document.getElementById("MainContent_HTMLTextBox_Comments"); //this gets the control just fine
MyControl.value = "Here's some text";

如果我有警报显示值，那么它会显示“这里有一些文本”，但该文本不会显示在 TextBox 本身中。

我也尝试过设置MyControl.innerHTML 和MyControl.text，但它们似乎都不起作用。

如何在TextBox中显示TextBox的值？

提前致谢！

编辑我发现this post 似乎表明 .value 是我应该用来设置此 TextBox 的文本，但它只是没有显示出来。我错过了什么？

【问题讨论】：

也许看看渲染的 html 会给你一些线索。
控件呈现的 HTML 是这样的：<textarea name="ctl00$MainContent$HTMLTextBox_Comments" rows="5" cols="20" id="MainContent_HTMLTextBox_Comments" style="height:200px;width:469px;"> Here's some text</textarea> <input type="hidden" name="ctl00$MainContent$HTMLTextBox_Comments_HtmlEditorExtender_ClientState" id="MainContent_HTMLTextBox_Comments_HtmlEditorExtender_ClientState" />

标签： javascript textbox htmleditorextender

【解决方案1】：

WebForms 为您的服务器端元素添加了一个疯狂的 id。试试 document.querySelector()

http://jsfiddle.net/ZhGX7/

<input type="text" id="abc_123_MyDiv" value="firstValue" />

<script>

var input = document.querySelector("input[id*=MyDiv]");

input.value="Updated Value"
</script>

【讨论】：

很棒的提示，可以让我不必查看构建页面的来源来找出全名，但是我在控制控件时没有遇到问题，我的问题是控件未显示我为控件设置的值。

【解决方案2】：

我找到了解决方案here。

诀窍是在 HTMLEditorExtender 中设置 ExtenderContentEditable div 的 innerHTML，而不是尝试直接设置文本框的值。值得注意的是，设置innerHTML也会设置值，所以你可以读取TextBox.value并得到你输入的内容。

感谢您的帮助。

【讨论】：