Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Нужна помощь с textarea (https://javascript.ru/forum/events/35048-nuzhna-pomoshh-s-textarea.html)

Torch`Ok 29.01.2013 13:00

Нужна помощь с textarea
 
Есть div и его содержимое переносится из textarea по keyup. Беда в том что из textarea не правильно переносятся переносы строк. Я решил чтоб при нажатии "Enter" в див записывался тег "<br />". Но не могу правильно реализовать... Хелп!!!
<textarea id="textarea1"></textarea>
<div id="div1"></div>

$('#textarea1').keyup(function (e) {
	 var txt = $(this).val()
	 	if(e.keyCode==13)
     {
          $('#div1').html(txt + '<br />');          
     }else{$('#div1').html(txt);}
  });

Этот скрипт вставляет <br /> но после следующего нажатия на любую клавишу тег исчезает...
p.s. Не желательно чтоб <br /> отображался в textarea

ksa 29.01.2013 13:30

Цитата:

Сообщение от Torch`Ok
Этот скрипт вставляет <br /> но после следующего нажатия на любую клавишу тег исчезает...

Просто меняй "возвраткаретки+перевод строки" на свой <br />...
http://javascript.ru/String/replace

Torch`Ok 29.01.2013 14:00

Вы наверно не так поняли... Или я ))
При переносе из текстареи в диве текст отображается в одну строку, не смотря на то что в текстарее он в несколько строк... Эту проблему я и пытаюсь решить, но не желательно просто в текстарею заносить тег BR, т.к. будет не очень хорошо это смотреться

ksa 29.01.2013 14:13

Цитата:

Сообщение от Torch`Ok
но не желательно просто в текстарею заносить тег BR

Таки не заноси в "текстарею"... :) Заноси в див...

Torch`Ok 29.01.2013 14:23

Если Вы имеете в виду див с contentEditable=true, то он как-то работает не понятно... Если пустой то курсор не ставится, только если какой-нибудь текст есть...

ksa 29.01.2013 14:23

Что-то типа такого...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(document).ready(function (){
	$('button').click(function (){
		var val=$('textarea').text();
		val=val.replace(/\r/g,'<br />')
		$('div').html(val);
	});
});
</script>
</head>
<body>
<textarea></textarea>
<button>get</button>
<div></div>
</body>
</html>

ksa 29.01.2013 14:24

Цитата:

Сообщение от Torch`Ok
он как-то работает не понятно..

Он работает всегда одинаково. :)

Deff 29.01.2013 14:27

Цитата:

Сообщение от Torch`Ok
Есть div и его содержимое переносится из textarea по keyup. Беда в том что из textarea не правильно переносятся переносы строк

можно при переносе обрамлять в теги <pre> </pre>

Deff 29.01.2013 14:31

В Опере - не перенеслось

ksa 29.01.2013 14:36

Цитата:

Сообщение от Deff
В Опере - не перенеслось

Да вот же... :( Смотрел в ИЕ...

Вот такой вариант работает и там, и там

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(document).ready(function (){
	$('textarea').keyup(function (e) {
		var val = this.value;
		val=val.replace(/\n/g,'<br />')
		$('div').html(val);
	});
});
</script>
</head>
<body>
<textarea></textarea>
<div></div>
</body>
</html>

Torch`Ok 29.01.2013 14:41

Все заработало!!!!!!!!!!!!!:dance:
Спасибо огромное))

Torch`Ok 29.01.2013 14:42

Чет плюс не добавляется, пишет "Вы должны добавить отзыв кому-то еще"..

ksa 29.01.2013 14:47

Цитата:

Сообщение от Torch`Ok
пишет "Вы должны добавить отзыв кому-то еще"..

Так добавь... Не жопься. :D

Torch`Ok 29.01.2013 14:53

И еще маленький вопросик))
Как сделать обратно replace(/\n/g,'<br />')
Так ?? replace('<br />',/\n/g)

Deff 29.01.2013 14:54

replace(/<br \/>/g,'\n')

По идее , при выделении курсором контента должно само вставить
Пример копирования из топика
Цитата:

И еще маленький вопросик))
Как сделать обратно replace(/\n/g,'<br />')
Так ?? replace('<br />',/\n/g)

Torch`Ok 29.01.2013 14:59

Цитата:

Сообщение от Deff (Сообщение 230139)
replace(/<br \/>/g,'\n')

По идее , при выделении курсором контента должно само вставить
Пример копирования из топика

Само не хочет... Пишет в одну строку

Torch`Ok 29.01.2013 15:03

var text = elem.html();
text = text.replace('<br />',/\n/g);
$('#textarea1').val(text);

Так не работает

Deff 29.01.2013 15:10

Само не хочет... Пишет в одну строку

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(document).ready(function (){
	$('textarea').bind('keyup mouseup mouseleave',function (e) {
		var val = this.value;
		val=val.replace(/\n/g,'<br />')
		$('div').html(val);
	});
});
</script>
</head>
<body>
фывфывфыв<br>
фывфывфыв<br>
<br>
<textarea></textarea>
<div></div>
</body>
</html>

Не наю = у меня вставляется

Torch`Ok 29.01.2013 15:50

Если скопировать и вставить то норм...Но у меня на клик по диву должно вставляться в текстарею тоже...
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(document).ready(function (){
           $('div').click(function (){
                var text = $(this).html();
	     text = text.replace('<br />',/\n/g);
                $('textarea').val(text);
          });

	$('textarea').bind('keyup mouseup mouseleave',function (e) {
		var val = this.value;
		val=val.replace(/\n/g,'<br />')
		$('div').html(val);
	});
          
});
</script>
</head>
<body>
<br>
<textarea></textarea>
<div>Текст</div>
</body>
</html>

Изначально текст есть в диве.... Он редактируется через текстарею...

Deff 29.01.2013 16:34

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(document).ready(function (){
	$('textarea').bind('input keyup mouseup mouseleave',function (e) {
		var val = this.value;
		val=val.replace(/\n/igm,'<br />')
		$('#insert2').html(val);
	});

	$('#insert').click(function () {
               var s=$('#insert').html().replace(/<br[^>]*>/g,'');
		$('textarea').val(s);
	});
});
</script>
</head>
<body>
<div id="insert">
фывфывфыв<br>
фывфывфыв<br>
</div>
<br>
<textarea></textarea>
<div id="insert2">
фывфывфыв<br>
фывфывфыв<br>
</div>
</body>
</html>

Torch`Ok 29.01.2013 16:38

Спасибо... Ноя я тут сам нарыл)))
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(document).ready(function (){
           $('div').click(function (){
                var text = $(this).html();
	     text = text.replace(/<br>/g, ' \n');
                $('textarea').val(text);
          });

	$('textarea').bind('keyup mouseup mouseleave',function (e) {
		var val = this.value;
		val=val.replace(/\n/g,'<br />')
		$('div').html(val);
	});
          
});
</script>
</head>
<body>
<br>
<textarea></textarea>
<div>Текст</div>
</body>
</html>

Так все работает...
Еще раз спасибо Вам за помощь...

ksa 29.01.2013 16:40

Цитата:

Сообщение от Torch`Ok
по диву должно вставляться в текстарею тоже...

Как вариант...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(document).ready(function (){
	$('textarea').keyup(function (e) {
		var val = this.value;
		val=val.replace(/\n/g,'<br />')
		$('div').html(val);
	});
	$('div').click(function (e) {
		var val = $('div').html();
		val=val.replace(/(<BR>)|(<br>)/g,'\n')
		alert(val);
		$('textarea').val(val);
	});
});
</script>
</head>
<body>
<textarea></textarea>
<div></div>
</body>
</html>

Deff 29.01.2013 16:42

.replace(/<br[^>]*>/igm,'');
Написание <br> <br/> <br />

поправил

ksa 29.01.2013 16:42

Цитата:

Сообщение от Torch`Ok (Сообщение 230160)
Ноя я тут сам нарыл)))
text = text.replace(/<br>/g, ' \n');

Дело в том, что в ИЕ <br> большими буквами... :D

Torch`Ok 29.01.2013 17:00

:) Совсем забыл про ишака:(
replace(/(<BR>)|(<br>)/g,'\n') - это сработало.

Deff 29.01.2013 17:10

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(document).ready(function (){
           $('div').click(function (){
                var text = $(this).text();
                if('\v'=='v' ){text=$(this).html().replace(/<br[^>]*>/igm,'\n');}
                $('textarea').val(text);
                
          });

	$('textarea').bind('keyup mouseup mouseleave',function (e) {
		var val = this.value;
		val=val.replace(/\n/g,'<br />')
		$('div').html(val);
	});
          
});
</script>
</head>
<body>
<br>
<textarea rows=7></textarea>
<br>
<br>
<br>
<div>
Текст<br>
Текст<br>
Текст<br>
</div>
</body>
</html>

Цитата:

Сообщение от Torch`Ok
replace(/(<BR>)|(<br>)/g,'\n') - это сработало.

Не нужен replace!!!

Torch`Ok 29.01.2013 17:19

Цитата:

Сообщение от Deff (Сообщение 230169)
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(document).ready(function (){
           $('div').click(function (){
                var text = $(this).text()
                $('textarea').val(text);
          });

	$('textarea').bind('keyup mouseup mouseleave',function (e) {
		var val = this.value;
		val=val.replace(/\n/g,'<br />')
		$('div').html(val);
	});
          
});
</script>
</head>
<body>
<br>
<textarea></textarea>
<br>
<br>
<br>
<div>
Текст<br>
Текст<br>
Текст<br>
</div>
</body>
</html>


Не нужен replace!!!

В твоем примере все выстраивает в одну строку...

Deff 29.01.2013 17:24

Torch`Ok,
:) Какой браузер?

(Только в ИЕ и выстраивается ...

Ща

Deff 29.01.2013 17:31

Поправил пост 26

Torch`Ok 29.01.2013 17:42

Опера у меня.. И все равно выстраивает в одну строку....
replace(/(<BR>)|(<br>)/g,'\n') - так а чем тебе этот способ не нравится???
Работает во всех браузерах.

Deff 29.01.2013 18:05

Torch`Ok,
У меня в свежей опере - лишние пробелы с добавкой replace
Протести в иных браузах


Часовой пояс GMT +3, время: 08:33.