How to save user-entered line breaks from a TextArea to a database?

前端未结

关注

 7  1577

How do I save user-entered line breaks from a </code> HTML element to a database?<br/> It always removes the line breaks.</p> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5408099190056760" data-ad-slot="7305827575" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="relativetags"> 相关标签: </div> </div> <div class="fly-panel detail-box" id="flyReply"> <fieldset class="layui-elem-field layui-field-title" style="text-align: center;"> <legend>7条回答</legend> </fieldset> <ul class="jieda" id="jieda"> <li data-id="111"> <a name="item-1111111111"></a> <div class="detail-about detail-about-reply"> <a class="fly-avatar" href="https://www.e-learn.cn/qa/u-71.html"> <img src="https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000071.jpg" alt=" "> </a> <div class="fly-detail-user"> <a href="https://www.e-learn.cn/qa/u-71.html" class="fly-link"> <cite>猫巷女王i </cite> </a> </div> <div class="detail-hits"> <span>2020-11-27 05:18</span> </div> </div> <div class="detail-body jieda-body photos"> <p>When displaying the content you need to convert line breaks into <code><br /></code> tags, otherwise the web browser won't display them. This is probably why you think they aren't being saved. If you're using PHP, use the nl2br() function to do this. In other languages you could do a string replace, replacing all occurrences of <code>"\n"</code> with <code>"<br />"</code>.</p> <div class="appendcontent"> </div> </div> <div class="jieda-reply"> <span class="jieda-zan button_agree" type="zan" data-id='419579'> <i class="iconfont icon-zan"></i> <em>0</em> </span> <span type="reply" class="showpinglun" data-id="419579"> <i class="iconfont icon-svgmoban53"></i> 讨论(0) </span> <div class="jieda-admin"> </div> </div> <div class="comments-mod " style="display: none; float:none;padding-top:10px;" id="comment_419579"> <div class="areabox clearfix"> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label> <div class="layui-input-block" style="margin-left:90px;"> <input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" /> <input type='hidden' value='0' name='replyauthor' /> </div> <div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="419579">提交评论 </span></div> </div> </form> </div> <hr> <ul class="my-comments-list nav"> <li class="loading"> <img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' /> 加载中... </li> </ul> </div> </li> <li data-id="111"> <a name="item-1111111111"></a> <div class="detail-about detail-about-reply"> <a class="fly-avatar" href="https://www.e-learn.cn/qa/u-114.html"> <img src="https://www.e-learn.cn/qa/data/avatar/000/00/01/small_000000114.jpg" alt=" "> </a> <div class="fly-detail-user"> <a href="https://www.e-learn.cn/qa/u-114.html" class="fly-link"> <cite>难免孤独 </cite> </a> </div> <div class="detail-hits"> <span>2020-11-27 05:21</span> </div> </div> <div class="detail-body jieda-body photos"> <p><strong>Pure CSS solution, NOT php specific</strong> <br/> In normal cases, the <code>TextArea</code> HTML element is preserving the white space in the database. <br/> The problem appears when trying to display the <code>\n</code> on the web browser, which will fail.</p> <p>To display <code>\n</code> in the web browser use :</p> <pre><code><p style="white-space: pre-line">multi-line text</p> </code></pre> <div class="appendcontent"> </div> </div> <div class="jieda-reply"> <span class="jieda-zan button_agree" type="zan" data-id='419578'> <i class="iconfont icon-zan"></i> <em>0</em> </span> <span type="reply" class="showpinglun" data-id="419578"> <i class="iconfont icon-svgmoban53"></i> 讨论(0) </span> <div class="jieda-admin"> </div> </div> <div class="comments-mod " style="display: none; float:none;padding-top:10px;" id="comment_419578"> <div class="areabox clearfix"> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label> <div class="layui-input-block" style="margin-left:90px;"> <input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" /> <input type='hidden' value='0' name='replyauthor' /> </div> <div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="419578">提交评论 </span></div> </div> </form> </div> <hr> <ul class="my-comments-list nav"> <li class="loading"> <img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' /> 加载中... </li> </ul> </div> </li> <li data-id="111"> <a name="item-1111111111"></a> <div class="detail-about detail-about-reply"> <a class="fly-avatar" href="https://www.e-learn.cn/qa/u-62.html"> <img src="https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000062.jpg" alt=" "> </a> <div class="fly-detail-user"> <a href="https://www.e-learn.cn/qa/u-62.html" class="fly-link"> <cite>无人及你 </cite> </a> </div> <div class="detail-hits"> <span>2020-11-27 05:25</span> </div> </div> <div class="detail-body jieda-body photos"> <p>I noticed that breakable content saved normally if textarea is inside a html form. But if I use textarea without any form and try to edit a long text in it, insert line breaks and save content via ajax, it's saved as a merged text into database</p> <div class="appendcontent"> </div> </div> <div class="jieda-reply"> <span class="jieda-zan button_agree" type="zan" data-id='419583'> <i class="iconfont icon-zan"></i> <em>0</em> </span> <span type="reply" class="showpinglun" data-id="419583"> <i class="iconfont icon-svgmoban53"></i> 讨论(0) </span> <div class="jieda-admin"> </div> </div> <div class="comments-mod " style="display: none; float:none;padding-top:10px;" id="comment_419583"> <div class="areabox clearfix"> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label> <div class="layui-input-block" style="margin-left:90px;"> <input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" /> <input type='hidden' value='0' name='replyauthor' /> </div> <div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="419583">提交评论 </span></div> </div> </form> </div> <hr> <ul class="my-comments-list nav"> <li class="loading"> <img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' /> 加载中... </li> </ul> </div> </li> <li data-id="111"> <a name="item-1111111111"></a> <div class="detail-about detail-about-reply"> <a class="fly-avatar" href="https://www.e-learn.cn/qa/u-27.html"> <img src="https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000027.jpg" alt=" "> </a> <div class="fly-detail-user"> <a href="https://www.e-learn.cn/qa/u-27.html" class="fly-link"> <cite>悲&欢浪女 </cite> </a> </div> <div class="detail-hits"> <span>2020-11-27 05:26</span> </div> </div> <div class="detail-body jieda-body photos"> <p>This will help. <code><textarea></textarea></code> instead of a input <code><input type="text"></code></p> <p>The database will keep this.</p> <div class="appendcontent"> </div> </div> <div class="jieda-reply"> <span class="jieda-zan button_agree" type="zan" data-id='419584'> <i class="iconfont icon-zan"></i> <em>0</em> </span> <span type="reply" class="showpinglun" data-id="419584"> <i class="iconfont icon-svgmoban53"></i> 讨论(0) </span> <div class="jieda-admin"> </div> </div> <div class="comments-mod " style="display: none; float:none;padding-top:10px;" id="comment_419584"> <div class="areabox clearfix"> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label> <div class="layui-input-block" style="margin-left:90px;"> <input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" /> <input type='hidden' value='0' name='replyauthor' /> </div> <div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="419584">提交评论 </span></div> </div> </form> </div> <hr> <ul class="my-comments-list nav"> <li class="loading"> <img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' /> 加载中... </li> </ul> </div> </li> <li data-id="111"> <a name="item-1111111111"></a> <div class="detail-about detail-about-reply"> <a class="fly-avatar" href="https://www.e-learn.cn/qa/u-36.html"> <img src="https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000036.jpg" alt=" "> </a> <div class="fly-detail-user"> <a href="https://www.e-learn.cn/qa/u-36.html" class="fly-link"> <cite>南笙 </cite> </a> </div> <div class="detail-hits"> <span>2020-11-27 05:29</span> </div> </div> <div class="detail-body jieda-body photos"> <p>Just put the output text between <code><pre></pre></code> tags, that will preserve the line breaks.</p> <div class="appendcontent"> </div> </div> <div class="jieda-reply"> <span class="jieda-zan button_agree" type="zan" data-id='419580'> <i class="iconfont icon-zan"></i> <em>0</em> </span> <span type="reply" class="showpinglun" data-id="419580"> <i class="iconfont icon-svgmoban53"></i> 讨论(0) </span> <div class="jieda-admin"> </div> </div> <div class="comments-mod " style="display: none; float:none;padding-top:10px;" id="comment_419580"> <div class="areabox clearfix"> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label> <div class="layui-input-block" style="margin-left:90px;"> <input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" /> <input type='hidden' value='0' name='replyauthor' /> </div> <div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="419580">提交评论 </span></div> </div> </form> </div> <hr> <ul class="my-comments-list nav"> <li class="loading"> <img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' /> 加载中... </li> </ul> </div> </li> <li data-id="111"> <a name="item-1111111111"></a> <div class="detail-about detail-about-reply"> <a class="fly-avatar" href="https://www.e-learn.cn/qa/u-57.html"> <img src="https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000057.jpg" alt=" "> </a> <div class="fly-detail-user"> <a href="https://www.e-learn.cn/qa/u-57.html" class="fly-link"> <cite>春和景丽 </cite> </a> </div> <div class="detail-hits"> <span>2020-11-27 05:29</span> </div> </div> <div class="detail-body jieda-body photos"> <p>I just learnt to use php's nl2br function and it is working fine for me. I'm using it to style how my users receive an email when sent from another user.</p> <div class="appendcontent"> </div> </div> <div class="jieda-reply"> <span class="jieda-zan button_agree" type="zan" data-id='419581'> <i class="iconfont icon-zan"></i> <em>0</em> </span> <span type="reply" class="showpinglun" data-id="419581"> <i class="iconfont icon-svgmoban53"></i> 讨论(0) </span> <div class="jieda-admin"> </div> </div> <div class="comments-mod " style="display: none; float:none;padding-top:10px;" id="comment_419581"> <div class="areabox clearfix"> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label> <div class="layui-input-block" style="margin-left:90px;"> <input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" /> <input type='hidden' value='0' name='replyauthor' /> </div> <div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="419581">提交评论 </span></div> </div> </form> </div> <hr> <ul class="my-comments-list nav"> <li class="loading"> <img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' /> 加载中... </li> </ul> </div> </li> <div style="text-align: center"> <div class="laypage-main"> <strong>1</strong> <a href="https://www.e-learn.cn/qa/q-103071/2.html">2</a> <a class="n" href="https://www.e-learn.cn/qa/q-103071/2.html">下一页</a> </div> </div> <style> .laypage-main a, .laypage-main span { display: inline-block; } </style> </ul> <div class="layui-form layui-form-pane"> <form id="huidaform" name="answerForm" method="post"> <div class="layui-form-item layui-form-text"> <a name="comment"></a> <div class="layui-input-block"> <script type="text/javascript" src="https://www.e-learn.cn/qa/static/js/neweditor/ueditor.config.js"></script> <script type="text/javascript" src="https://www.e-learn.cn/qa/static/js/neweditor/ueditor.all.js"></script> <script type="text/plain" id="editor" name="content" style="width:100%;height:200px;"></script> <script type="text/javascript"> var isueditor=1; var editor = UE.getEditor('editor',{ //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个 toolbars:[['source','fullscreen', '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'link', 'unlink', 'anchor', '|', 'simpleupload', 'insertimage', 'scrawl', 'insertvideo', 'attachment', 'map', 'insertcode', '|', 'horizontal', '|', 'preview', 'searchreplace', 'drafts']], initialContent:'', //关闭字数统计 wordCount:false, zIndex:2, //关闭elementPath elementPathEnabled:false, //默认的编辑区域高度 initialFrameHeight:250 //更多其他参数，请参考ueditor.config.js中的配置项 //更多其他参数，请参考ueditor.config.js中的配置项 }); editor.ready(function() { editor.setDisabled(); }); $("#editor").find("*").css("max-width","362px"); </script> </div> </div> <div class="layui-form-item"> <label for="L_vercode" class="layui-form-label">验证码</label> <div class="layui-input-inline"> <input type="text" id="code" name="code" value="" required lay-verify="required" placeholder="图片验证码" autocomplete="off" class="layui-input"> </div> <div class="layui-form-mid"> <span style="color: #c00;"><img class="hand" src="https://www.e-learn.cn/qa/user/code.html" onclick="javascript:updatecode();" id="verifycode"><a class="changecode" href="javascript:updatecode();"> 看不清?</a></span> </div> </div> <div class="layui-form-item"> <input type="hidden" value="103071" id="ans_qid" name="qid"> <input type="hidden" id="tokenkey" name="tokenkey" value=''/> <input type="hidden" value="How to save user-entered line breaks from a TextArea to a database?" id="ans_title" name="title"> <div class="layui-btn layui-btn-disabled" id="ajaxsubmitasnwer" >提交回复</div> </div> </form> </div> </div> <input type="hidden" value="103071" id="adopt_qid" name="qid" /> <input type="hidden" id="adopt_answer" value="0" name="aid" /> </div> <div class="layui-col-md4">  <dl class="fly-panel fly-list-one"> <dt class="fly-panel-title">热议问题</dt>