Записать в текстовое поле при нажатии клавиши ввода? - PullRequest
Новая
       60

Записать в текстовое поле при нажатии клавиши ввода?

2 голосов
/ 09 сентября 2010

У меня есть текстовая область, которая будет обрабатывать вывод, и текстовое поле, которое будет обрабатывать пользовательский ввод.

Фокус будет полностью на поле ввода. Я не могу сделать так, чтобы поле ввода пользователя добавляло текст при отправке формы (нажата клавиша ввода). Это будет работать, только если есть кнопка и нажата эта кнопка. Как мне решить эту проблему?

Ниже приведен код, который я пытаюсь отправить, нажав клавишу ввода. 

<html>
<head>
<script type="text/javascript">
  function addtxt(input) {
    var obj=document.getElementById(input)
    var txt=document.createTextNode("blah blah")
    obj.appendChild(txt)
  }
</script>
</head>
<body>
<textarea id="textarea1"></textarea>
<br><input type="text" onSubmit="addtxt('textarea1');">
</body>
</html>

Ответы [ 4 ]

2 голосов
/ 09 сентября 2010

Это сделает работу. Кроме того, вам следует иметь дело со свойством value текстовой области, а не добавлять к нему текстовые узлы: если пользователь вообще изменит значение текстовой области, изменение дочерних узлов впоследствии не будет иметь никакого эффекта. Если вы хотите, чтобы текстовая область была доступна только для чтения, добавьте атрибут readonly: <textarea id="textarea1" readonly></textarea>. 

<script type="text/javascript">
    function inputKeyDown(evt, input) {
        if (evt.keyCode == 13) {
            var textarea = document.getElementById("textarea1");
            textarea.value += "\n" + input.value;
            input.value = ""; // I'm guessing you may want this
            return false;
        }
    }
</script>

<input type="text" onkeydown="return inputKeyDown(event, this);">
1 голос
/ 09 сентября 2010

Вместо отправки попробуйте использовать событие нажатия клавиши. Определите, когда нажата клавиша ввода, скопируйте данные и отмените событие (чтобы предотвратить отправку формы). Если вы разрешите отправлять форму, она просто заменит существующую страницу результатом публикации формы.

Изменение вашего текущего кода: 

<html> 
<head> 
<script type="text/javascript"> 
  function addtxt(e,ctl,input) {
    var key;
    if (window.event) {
       key = event.keyCode;
    } else {
       key = e.which;
    }
    if (key == 13) {
       var obj=document.getElementById(input);
       var txt=document.createTextNode("blah blah");
       obj.appendChild(txt);
       ctl.value = '';
       return false;
    }
    return true;
  } 
</script> 
</head> 
<body> 
<textarea id="textarea1"></textarea> 
<br><input type="text" onkeypress="return addtxt(event,this,'textarea1');"> 
</body> 
</html>

Обратите внимание, что могут быть гораздо лучшие способы достижения вашей конечной цели, но, поскольку вы не указываете, что это такое, это действительно лучшее, что я могу сделать. Кроме того, я бы определенно посмотрел на использование фреймворка, такого как jQuery / Dojo / Prototype, и незаметно добавил обработчики.

0 голосов
/ 09 сентября 2010

Вы можете использовать JQuery 

$('textarea#textarea1').keypress(function(e) {
    if (e.keyCode == 13) { // enter
       //do some stuff
    }
});
0 голосов
/ 09 сентября 2010

Используйте элемент формы 

<form onsubmit="addtxt('textarea1')">
    <textarea id="textarea1"></textarea>
    <br><input type="text" />
</form>
...