div contenteditable =“true” [英] div contenteditable="true"
问题描述
好吧！我现在面对这个小时...
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
编辑（完全正常工作 - 测试）
我在你的小提琴上测试过它，它工作得很好：
< $（$'code> $（'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...
edit what's happening is,
in the div,
I
am
crazy.
but
your
way
of
coding
is
worst.
but in textarea, using .html() in div
I<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 this
I am crazy. but your way of coding is worst.
and really, I don't want that...
It'd be easiest to use phpjs.org's nl2br function: http://phpjs.org/functions/nl2br:480
EDIT (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”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
