div contenteditable =“true”

本文介绍了div contenteditable =“true”的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 好吧！我现在面对这个小时... html < div contenteditable =truestyle =width：509px;>< / div> jQuery }）; '（'textarea'）。keyup（function（）{ $（'div'）。html（$（this）.val（））; }）; 我希望无论我在< div>中输入什么内容，都会看起来像 / strong>在< textarea>中，反之亦然......但我被卡住了...... 请看我的小提琴我的意思是...... 原因在于，我使用< div>作为< textarea>的替代品。 。因为< div>的滚动条比< textarea> ...容易定制，但是如果你能看到，contenteditable div会包含另一个div，当你按下enter键时... edit 发生了什么事情，， 但是在textarea中，使用 .html（） I< div> am< / div> ;< DIV>疯狂< / DIV>< DIV>但< / DIV>< DIV>的< / DIV>< DIV>办法< / DIV>< DIV> / DIV><和LT的; DIV>编码< / DIV>< DIV>为< / DIV>< DIV>最坏< / DIV> .text（）就像这样真的，我不希望那... ... 解决方案使用phpjs.org的nl2br函数最简单： http://phpjs.org/functions/nl2br:480 编辑（完全正常工作 - 测试） 我在你的小提琴上测试过它，它工作得很好： $（'div'）。keyup（function（）{ $（'textarea'）。val（$（this）.html（）。replace（/< ; // $（'textarea'）.val（$（this）.html（））//也不按预期工作} ）; $（'textarea'）。keyup（function（）{ $（'div'）。html（nl2br（$（this）.val（），0））}） ; 函数nl2br（str，is_xhtml）{ //将换行符转换为HTML换行符 // //版本：1004.2314 //讨论在：http：//phpjs.org/functions/nl2br //原文：Kevin van Zonneveld（http://kevin.vanzonneveld.net） // +改进者：Philip Peterson / / +改进：Onno Marsman // +改进：AtliÞór // + bug + by：Onno Marsman // +输入：Brett Zamir（http://brett-zamir.me） // + bugfixed by：Kevin van Zonneveld（http://kevin.vanzonneveld.net） // +改进者：Brett Zamir（http://brett-zamir.me） // +改进：Maximusya // *例子1：nl2br（'Kevin \\\van\\\Zonneveld'）; // *返回1：'Kevin \\\van\\\Zonneveld' // *例2：nl2br（\\\One\\\Two\\\\\\Three\\\，false）; // *返回2：'< br> \\\1< br> \\\Two< br> \\\< br> \\\Three< br> \\\' // *例3：nl2br（\ nOne \\\Two\\\\\\Three\\\，true）; // *返回3：'\\\One\\\Two\\\\\\Three\\\' var breakTag =（is_xhtml || typeof is_xhtml ==='undefined'）？ ''：'< br>'; return（str +''）.replace（/（[^&>; \r\\\]？）（\r\\\ | \\\\r | \ r | \\\）/ g，'$ 1'+ breakTag +'$ 2'）; } Okay!... I'm facing this for hours now...html<div contenteditable="true" style="width: 509px; "></div><textarea cols="50" rows="10"></textarea>​jQuery$('div').keyup(function(){ $('textarea').val($(this).text());});$('textarea').keyup(function(){ $('div').html($(this).val());})​;​I want it that whatever I type in the <div>, would look as is in the <textarea> and vice versa... but I'm stuck... please see my Fiddle for what I mean...for the reason is that, I'm using <div> as a replacement for <textarea>... because <div>'s scrollbar is easy to customize than of the <textarea>... but if you can see, contenteditable div would include another div when you press enter...editwhat's happening is,in the div,but in textarea, using .html() in divI<div>am</div><div>crazy.</div><div>but</div><div>your</div><div>way</div><div>of</div><div>coding</div><div>is</div><div>worst.</div>.text() is like thisand really, I don't want that... 解决方案 It'd be easiest to use phpjs.org's nl2br function:http://phpjs.org/functions/nl2br:480EDIT (fully working -- tested)I tested this on your fiddle and it worked:$('div').keyup(function(){ $('textarea').val( $(this).html().replace( /<br>/g, '\n' ) ); //$('textarea').val($(this).html()) // also not working as expected});$('textarea').keyup(function(){ $('div').html( nl2br( $(this).val(), 0 ) )});function nl2br (str, is_xhtml) { // Converts newlines to HTML line breaks // // version: 1004.2314 // discuss at: http://phpjs.org/functions/nl2br // + original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net) // + improved by: Philip Peterson // + improved by: Onno Marsman // + improved by: Atli Þór // + bugfixed by: Onno Marsman // + input by: Brett Zamir (http://brett-zamir.me) // + bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net) // + improved by: Brett Zamir (http://brett-zamir.me) // + improved by: Maximusya // * example 1: nl2br('Kevin\nvan\nZonneveld'); // * returns 1: 'Kevin\nvan\nZonneveld' // * example 2: nl2br("\nOne\nTwo\n\nThree\n", false); // * returns 2: '<br>\nOne<br>\nTwo<br>\n<br>\nThree<br>\n' // * example 3: nl2br("\nOne\nTwo\n\nThree\n", true); // * returns 3: '\nOne\nTwo\n\nThree\n' var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '' : '<br>'; return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1'+ breakTag +'$2');} 这篇关于div contenteditable =“true”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！