文章目录

DIV可编辑输入(contenteditable)并能够提交表单内容

想让DIV标签可编辑输入内容,我们只需设置contenteditable="true"即可。

<div contenteditable="true" id="divcontent"></div>

但是如果我们想将在div里面输入的内容,进行表单提交保存到数据库又该怎么操作呢?

直接$_POST["divcontent"]是不行的,所以我们得另想办法。

如下代码:

<style>
#div_content{border-bottom:1px #ccc solid;line-height:28px;min-height:28px;}
</style>

<form name="form1" method="post">
<div contenteditable="true" id="div_content"></div>
<textarea name="textarea_content" id="textarea_content" style="width:350px; height:70px;"></textarea>
<p><input type="submit" value="提交" /></p>
</form>
<script>
$(document).on("keyup","#div_content",function(){
    $("#textarea_content").html($(this).html());
});
</script>

亲自测试一下

也就是放一个隐藏的textarea,当在div标签输入内容的时候执行其keyup事件,将内容赋值给textarea。

提交表单的时候,提交textarea即可。

DIV可编辑输入(contenteditable)并能够提交表单内容

本文网址:http://www.santii.com/article/214.html


数据更新时间:2018-09-21