锐英源软件
第一信赖

精通

英语

开源

擅长

开发

培训

胸怀四海 

第一信赖

当前位置:锐英源 / 开源技术 / ASP.NET开源技术 / ASP.NET环境下有contentEditable属性的可编辑HTML标签获取数据方法
服务方向
人工智能数据处理
人工智能培训
kaldi数据准备
小语种语音识别
语音识别标注
语音识别系统
语音识别转文字
kaldi开发技术服务
软件开发
运动控制卡上位机
机械加工软件
软件开发培训
Java 安卓移动开发
VC++
C#软件
汇编和破解
驱动开发
联系方式
固话:0371-63888850
手机:138-0381-0136
Q Q:396806883
微信:ryysoft

ASP.NET环境下有contentEditable属性的可编辑HTML标签获取数据方法

contentEditable是html中的一个属性。使用这个属性之后,我们可以直接对页面中的标签进行编辑。该属性的取值为布尔型,即"true"或"false"。设置html的contentEditable="true"时,说明开启了元素的编辑模式。如果设置contentEditable="false"时,就说明页面中的元素是不可编辑的。我们经常会用到的文本输入内容是input与textarea,使用contentEditable属性后,可以在div、table、p、span和body等等很多元素中输入内容。如果想要整个页面都是可编辑的,可以在body标签内设置contentEditable。使用了“contenteditable”属性,使div变成了textarea效果,还可以使文本框随着内容的多少来自适应高度。下面用个例子来介绍下:

可编辑标签示例

contenteditable是HTML5的新属性,contentEditable已在html5标准中得到有效的支持。显示可编辑的文本的HTML代码如下:

  <form id="form1" runat="server">
  <div>
<br />
<div id="TextEdit" class="editable">
<div id="request" runat="server" contenteditable="true"></div>
<div id="requestInner" style="border-left:solid 1px gray; margin-left:10px; margin-right:10px;"
contenteditable="false" UNSELECTABLE="ON"><b>I am the inner div</b><br />with multple lines. You can check me on this.<hr />
This is the next line of text in <b>bold</b>, <i>Italic</i> and
<span style="text-decoration:underline">underlined</span>. Click here for more details <a target="_blank" href="http://www.articledean.com">Articledean.com</a></div>
</div>
<asp:Button ID="btnSave" runat="server" Text="Save" OnClientClick="return onsaveclicked();" onclick="btnSave_Click" />
<br />
<textarea id="hrequest" runat="server" cols="50" rows="10" style="display:none;"></textarea> <br />
Server Response:<br />
Output in a Div (With out saving the format):<br />
<div style="border:solid 1px gray; width:300px; " id="response" runat="server"></div><br />
Output in a textbox (With the format):<br /><textarea id="txtoutput" runat="server" cols="50" rows="10"></textarea>
</div>
</form>

为了获取文本框内的文本(HTML),我创建了一个父级div元素,id = "TextEdit”和应用样式表“editable”。

在父级div元素中,我添加了一个子元素,id =“request”并且设置属性“contenteditable = " true ",这使得div元素是可编辑的。

可编辑文本区域的下方,我添加了另一个div元素,id =“requestInner”并且设置“contenteditable = " false ",并显示富文本(HTML)。

如何获取数据前端DIV部分

要保存数据,一个隐藏多行文本框要添加到网页内,其中我们在HTML中定义的hrequest,我们给它的属性设置为“display:none;”就表示是隐藏的文本框,在保存数据中,也要返回隐藏文本的值到浏览器中。这个隐藏的文本框也要是服务器端控件,这样在ASP.NET的C#代码里才可以访问到它。

另外还要注意一点:OnClientClick和onclick的设置。OnClientClick是前端函数,在点击时它先执行;onclick是后台函数,它后执行。OnClientClick是在为onclick做准备,有了准备才好获取数据。这个OnClientClick非常妙,因为如果不知道的时候,想实现功能就很麻烦,以前我写过用blur事件来获取可编辑内容,就很麻烦。

如何获取数据前端代码部分

一旦用户输入文本,点击保存,在表单提交之前,div中输入的文本被复制到隐藏的文本框中。这是JavaScript。

  <script type="text/javascript">
function ReplaceTags(xStr) {
var regExp = /<\/?[^>]+>/gi;
xStr = xStr.replace(/<\/P>/gi, "\r\n");
xStr = xStr.replace(/<BR>/gi, "\r\n");
xStr = xStr.replace(/<P>/gi, "");
xStr = xStr.replace(regExp, "");
return xStr;
}
function onsaveclicked() {
var reqDiv = document.getElementById("<%=request.ClientID %>");
var hhrequestBox = document.getElementById("<%=hrequest.ClientID%>");
var responseText = ReplaceTags(reqDiv.innerHTML);
hhrequestBox.value = responseText;
return true;
}
</script>

这段代码有2个重要知识点:用<%%>获取服务器控件前台表示的ID和标签内容验证通过机制。

用<%%>获取服务器控件前台表示的ID

<%%>是服务器的标记 , 包含在< % %>中的表达式将服务器端的执行结果输出到客户浏览器 , 如:< % =test %>就是将变量test的值发送到客户浏览器中。<%=... %>还可以绑定服务器控件属性,如Label、TextBox,等等。

ClientID是由ASP.Net生成的服务器控件在客户端上标识符,表示由服务器端生成的客户端控件的ID,经常用于在客户端脚本中访问服务器控件所呈现的 HTML 元素。一般情况下与服务器端的ID相同,有时,不能为控件生成唯一的名称。比如在母板中,网页中的ID名会不相同。

以上代码中<%=request.ClientID %> 表明request是在服务端运行,在客户端前台部分,它的id不一定是request,所以要用<%=request.ClientID %>获取客户端Id的字符串。

<%=request.ClientID %>这么写的好处就是,如果你用的是母板,你再看你内容页所有控件的ID都不是原来的你写的ID了,是在你定义的ID前面加了一串别的东西,如果你直接 getElementById("id")的话是取不到的。如果用clientid就是生成后的id,就可以正常获取。

标签内容验证通过机制

如果你想知道为什么使用“ReplaceTags”方法,下面是答案。

由于内置的ASP.NET Web表单验证,它不允许任何文本框提交HTML标记。所以所有的标签都被替换了,除了“P”和“BR”。

在一个典型的文本框中,,每按一次“回车”键,它都是通过Windows系统的“\r\n"表示的。

在HTML5中,大部分显示文本内容的元素都支持“contenteditable”属性,这给页面中用户的交互体验带来了极大的方便。

ASP.NET后台获取数据代码

    protected void btnSave_Click(object sender, EventArgs e)
    {
        response.InnerHtml = hrequest.Value;
        txtoutput.Value = hrequest.Value;
    }

OnClientClick内已经把数据赋值给了隐藏的服务器端控件hrequest,这时候用它的值很有保障了。

友情链接
版权所有 Copyright(c)2004-2021 锐英源软件
公司注册号:410105000449586 豫ICP备08007559号 最佳分辨率 1024*768
地址:郑州大学北校区院(文化路97号院)内