[英]Get text from textarea and append it to a hidden input
I'm having a really hard time with this.我在这方面真的很难受。 I have a template that uses a bootstrap wysiwyg and has this structure (which is added dynamically when loading the template):我有一个使用 bootstrap wysiwyg 的模板并具有以下结构(在加载模板时动态添加):
<div class="col-sm-10">
<div class="summernote" style="display: none;"></div>
<div class="note-editor">
<div class="note-dropzone">//content</div>
<div class="note-dialog">//content</div>
<div class="note-handle">//content</div>
<div class="note-popover">//content</div>
<div class="note-toolbar btn-toolbar">//content</div>
<textarea class="note-codable"></textarea>
<div class="note-editable" contenteditable="true">
<p></p>
</div>
</div>
I have noticed that when inspecting the code, what I write inside the editor is being added to the p tag.我注意到在检查代码时,我在编辑器中编写的内容被添加到 p 标签中。
my question is, how do I get to "catch" what the user writes on the wysiwyg textarea and receive it when sending through $_POST in php?我的问题是,如何“捕捉”用户在所见即所得文本区域上写的内容并在通过 $_POST 在 php 中发送时接收它?
So far, my approach is:到目前为止,我的方法是:
add to the pa blur function so when user stops writing and clicks outside, content can be copied into a hidden input添加到 pa 模糊功能,因此当用户停止书写并在外部单击时,可以将内容复制到隐藏的输入中
window.onload = function(){ var paragraph = $('.note-editable').find('div').find('p:first'); paragraph.id = 'pr'; $("#pr").blur(function(){ alert("This input field has lost its focus."); }); }
of course I'm not having success with this and my head is a little bit burned right now.当然,我没有成功,现在我的头有点烧。 Any help appreciated.任何帮助表示赞赏。
Just use the built in method for summernote to get the code, then use jQuery to convert it to text.只需使用summernote的内置方法获取代码,然后使用jQuery将其转换为文本。
var html = $('.summernote').code();
$('#hiddenField').val($(html).text());
Try using input
event , this.textContent
within handler to retrieve text within .note-editable
element尝试使用input
事件,处理程序中的this.textContent
来检索.note-editable
元素中的文本
$(".note-editable").on("input", function(e) { console.log(this.textContent) })
.note-editable { border:1px solid #000; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <div class="col-sm-10"> <div class="summernote" style="display: none;"></div> <div class="note-editor"> <div class="note-dropzone">//content</div> <div class="note-dialog">//content</div> <div class="note-handle">//content</div> <div class="note-popover">//content</div> <div class="note-toolbar btn-toolbar">//content</div> <textarea class="note-codable"></textarea> <div class="note-editable" contentEditable="true"> <p></p> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.