Лента Каталог Файлы Форумы Услуги
ОсновноеRadiotalkПользовательское
MPCHAT - CMS хостинг чатов для профессионалов
90   •   Посмотреть все темы

Textarea и enter

 
1 2

101
Ромарио @werton
В чате поле для ввода текста сделал как textarea / все хорошо но не могу сделать при нажатии клавиши Enter отправку сообщения, где то видел но уже впомнить не могу, сегодня перерыл весь интернет ничего не могу найти, есть но для движков. Надеюсь здесь мне помогут.

Код - <textarea name=text0 maxlength=1000 ></textarea>

Нужно кажись добавить скрипт и написать еще в сам код textarea определение. Вот не могу найти сам скрипт, или есть какие то другие варианты? В общем жду ответа, СПАСИБО!

Отредактировано werton - 18.03.2008
20090
Dimitry @Dimitry
onkeypress
нужно читать код нажатой клавиши если это ентер то отправлять )

подробностей незнаю)

101
Ромарио @werton
Вот приблизительный скрипт

<script type="text/javascript">
function Keypress(evt) {
var text0 = document.getElementById("text0");
evt = (evt) ? evt : ((window.event) ? event : false )
if(evt) {
if(evt.keyCode == 13 && evt.shiftKey) {
text0.value += ' ';
evt.returnValue();
} else if(evt.keyCode == 13) {
document.fmsg.submit();
text0.value = '';
if (evt.preventDefault) evt.preventDefault()
evt.cancelBubble = true;
if(evt.stopPropagation) evt.stopPropagation();
return (evt.returnValue = false);
}
}
}

</script>

Красным выделил строку которую нужно заменить на свою, при нажатии ентера изначально она не работает но если один раз отправить сообщение обычной кнопкой и после этого пытатся отправить сообщение ентером будет выводить предыдущее сообщение всевремя........ вот в этом и вопрос что туда вписать, смотрел скрипты чата, подставлял пол дня... так ничего не получилось, может кто знает?

а в код самой textarea добавляем onkeypress="Keypress(event);"

Есть еще вариант сделать так document.forms[0].submit(); вместо той строки вставить эту, но результат получается тот же, просто получает информацию по разному (как я думаю)

Отредактировано werton - 18.03.2008
526
Kreg-Heg @Kreg-Heg
в textarea кнопка enter соскакивает со строки, если нужно чтобы она отправляла, то для чего тогда вообще использовать textarea? используй text

101
Ромарио @werton
в обычном text не переводит на новую строку, а так просто для вида зачем оно?

Отредактировано werton - 20.03.2008
2
Donna @Donna
У кого-нибудь получилось? Я тоже хочу заменить строку ввода на окно с переносом строки, как в скайпе или в аське.

424
ishkiniaev @ishkiniaev
Захотел заменить поле инпут на textarea, надо чтобы при нажатии энтера отправлялось сообщение.
То, что выше не помогло. Если кто знает, подскажите 😀

Само поле
<textarea class=text1 name=text0 maxlength=500 onkeypress="if(enabletrans) return autotrans(this,event);" onkeydown="if(event.ctrlKey && event.altKey) {checktrans(); return false;}"></textarea>

4619
Web3r @Web3r
JQuery-вариант: **********

424
ishkiniaev @ishkiniaev
Web3r пишет:

JQuery-вариант: **********

объясни, пожалуйста, как именно сделать. куда вставить это, как будет выглядить в итоге textarea

4619
Web3r @Web3r
Единственный минус - при отправке на Enter он будет переводить строку вниз... Т.е. надо сделать ещё один скрипт, который бы сбрасывал фокус после отправки сообщения и возвращал его обратно на первую строку.

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style>
#area { resize: none; overflow: hidden; }
</style>
</head>

<body>
<script>
$(document).ready(function(){
$('#area').keypress(function(e){
if(e.which == 13){
$('form').submit();
}
});
});
</script>

<textarea id="area" type="text" name="text0" rows="2"></textarea>
<input type="submit" value="Отправить">

</body>

Отредактировано Web3r - 11.01.2014
424
ishkiniaev @ishkiniaev
Web3r пишет:

Единственный минус - при отправке на Enter он будет переводить строку вниз... Т.е. надо сделать ещё один скрипт, который бы сбрасывал фокус после отправки сообщения и возвращал его обратно на первую строку.

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style>
#area { resize: none; overflow: hidden; }
</style>
</head>

<body>
<script>
$(document).ready(function(){
$('#area').keypress(function(e){
if(e.which == 13){
$('form').submit();
}
});
});
</script>

<textarea id="area" type="text" name="text0" rows="2"></textarea>
<input type="submit" value="Отправить">

</body>

Не отправляет сообщения 🙁
Если не трудно, сейчас ссылкой чата в лс поделюсь, мб как-то ясно станет

1007
BETEPAH @BETEPAH
ctrl = false;
shift = false;
$('#abc').keydown(function(event){
switch (event.which) {
case 13: return false;
case 16: shift = true;
case 17: ctrl = true;
}
});
$('#abc').keyup(function(event){
switch (event.which) {
case 13:
if (!ctrl && !shift) {
$('#fmsg').submit();
return false;
}
breakText('\r\n');
break;
case 16: shift = false;
case 17: ctrl = false;
}
});
enter - перенос строки, ctrl+enter или shift+enter отправляют

424
ishkiniaev @ishkiniaev
BETEPAH пишет:

ctrl = false;
shift = false;
$('#abc').keydown(function(event){
switch (event.which) {
case 13: return false;
case 16: shift = true;
case 17: ctrl = true;
}
});
$('#abc').keyup(function(event){
switch (event.which) {
case 13:
if (!ctrl && !shift) {
$('#fmsg').submit();
return false;
}
breakText('\r\n');
break;
case 16: shift = false;
case 17: ctrl = false;
}
});
enter - перенос строки, ctrl+enter или shift+enter отправляют

а наоборот сделать можно?

1007
BETEPAH @BETEPAH
edenhazz пишет:

BETEPAH пишет:

enter - перенос строки, ctrl+enter или shift+enter отправляют

а наоборот сделать можно?

Наоборот и есть, я перепутал, сорри. Энтер отправляет, а энтер с зажатыми шифтом или кнтрлом переносят строку.
Так же забыл указать, что у меня вспомогательные функции используются:
// вставка текстов в строку сообщения
function breakText(str) {
var caret = getCaretPosition('abc');
var text = $('#abc').val();
$('#abc').val(text.substring(0, caret)+str+(text.substring(caret)));
setCaretPosition('abc', ($.browser.opera) ? caret+2 : caret+1);
}
function breakText_rangyinputs() {
var caret = $('#abc').getSelection().start;
$('#abc').insertText('\r\n', caret, false).setSelection(caret+1, caret+1);
}
function getCaretPosition(id) {
el = document.getElementById(id);
if (el.selectionStart) {
return el.selectionStart;
} else if (document.selection) {
el.focus();
var r = document.selection.createRange();
if (r == null) {
return 0;
}
var re = el.createTextRange(),
rc = re.duplicate();
re.moveToBookmark(r.getBookmark());
rc.setEndPoint('EndToStart', re);
var add_newlines = 0;
for (var i=0; i<rc.text.length; i++) {
if (rc.text.substr(i, 2) == '\r\n') {
add_newlines += 2;
i++;
}
}
return rc.text.length + add_newlines;
}
return 0;
}
function setCaretPosition(id, pos) {
el = document.getElementById(id);
if(el.setSelectionRange) {
el.focus();
el.setSelectionRange(pos,pos);
} else if (el.createTextRange) {
var range = el.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}

424
ishkiniaev @ishkiniaev
В итоге, пожалуйста, объясните, что куда вставить.

нынче поле для текста выглядит так
<textarea id="area" class="text1" type="text" name="text0" placeholder="Напиши кому-нибудь..." rows="2" style="resize: none; width:400px; height:40px; float:left; overflow: hidden;"></textarea>
надо в нем что-то менять? И куда скрипт вставить

1007
BETEPAH @BETEPAH
edenhazz пишет:

нынче поле для текста выглядит так
<textarea id="area"

замените "abc" на "area" в скриптах.
edenhazz пишет:

что куда вставить

не знаю

424
ishkiniaev @ishkiniaev
Web3r пишет:

Единственный минус - при отправке на Enter он будет переводить строку вниз... Т.е. надо сделать ещё один скрипт, который бы сбрасывал фокус после отправки сообщения и возвращал его обратно на первую строку.

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style>
#area { resize: none; overflow: hidden; }
</style>
</head>

<body>
<script>
$(document).ready(function(){
$('#area').keypress(function(e){
if(e.which == 13){
$('form').submit();
}
});
});
</script>

<textarea id="area" type="text" name="text0" rows="2"></textarea>
<input type="submit" value="Отправить">

</body>

Заработало. Кто может помочь со скриптом, который будет сбрасывать фокус, очень буду благодарен.

1007
BETEPAH @BETEPAH
Web3r пишет:

Т.е. надо сделать ещё один скрипт, который бы сбрасывал фокус после отправки сообщения и возвращал его обратно на первую строку.

А e.preventDefault() не поможет?

424
ishkiniaev @ishkiniaev
BETEPAH пишет:

Web3r пишет:

Т.е. надо сделать ещё один скрипт, который бы сбрасывал фокус после отправки сообщения и возвращал его обратно на первую строку.

А e.preventDefault() не поможет?

поподробней, пожалуйста.

Все, сделал) В итоге получилось
<script>
$(document).ready(function(){
$('#area').keypress(function(e){
if(e.which == 13){
$('form').submit();
e.preventDefault()
}
});
});
</script>

Спасибо!

Отредактировано ishkiniaev - 13.01.2014
2
пузо @пузо
Доброго времени суток. Подскажите пожалуйста, можно ли сделать в этом примере, что выше, что бы смайлики отображались в строке? Ну как в ВК?