Обработка ввода в поле редактирования
В моей теме "Вопросы новичка" никто не ответил, видимо я хочу многого или мне просто лень читать. Хотя я и просил, чтобы направили только.
Ну ладно, разделю на подзадачи свою задачу. Предположим, что нужно на страничке отобразить однострочное поле редактирования, а под ним текстовую метку. В этой текстовой метке будет находиться текущее содержимое поля ввода. Как это реализуется в вебе на JavaScript?? Я прекрасно понимаю, как это для десктопа бы делалось, но для веба, не представляю. Спасибо |
Так, что ли?
<html>
<body>
<input type="text" id="i1"><br>
<div id="d1"><!-- пока пусто --></div>
<script>
document.getElementById("i1").onchange = function() {
var d1 = document.getElementById("d1");
return function() { d1.textContent = this.value; }
}();
</script>
</body>
</html>
|
rgl,
Спасибо большое! Почти так! Только нужно, чтобы в метке отображался текст до нажатия Enter тоже. Т.е. я ввожу в поле ввода символ (или стираю его) и метка тоже изменяется. |
<html>
<body>
<input type="text" id="i1"><br>
<div id="d1"><!-- пока пусто --></div>
<script>
document.getElementById("i1").onkeyup= function() {
var d1 = document.getElementById("d1");
return function() { d1.textContent = this.value; }
}();
</script>
</body>
</html>
|
И еще вопрос. Допустим страничка будет посложнее, кода соответственно больше. Можно же будет весь код вынести в отдельный *.js файл, а на страничке прописать только в теге script путь к файлу *.js? И если да, то можно ли создать для каждого обработчика, например, отдельный файл? Т.е. файлов с кодом будет несколько, чтобы не было одного большого файла. И как тогда прописать на страничке? Несколько тегов <script> ??
|
Вынести скрипты в отдельные файлы конечно можно, и сделать по файлу на обработчик тоже можно. Только не переусердствуйте с количеством файлов, т.к. каждый файл - запрос на сервер.
Чтобы подключить файл скрипта надо написать: <script src="js/fileName.js"></sctipt> Т.е мы указываем путь к файлу относительно текущего файла и название. |
Этот вариант также учитывает варианты вставки из контекстного меню, перетаскивания текста мышкой и прочие методы ввода.
<!DOCTYPE html>
<html>
<body>
<input type="text" id="i1"><br>
<div id="d1"><!-- пока пусто --></div>
<script>
(function(){
var input = document.getElementById("i1");
var output = document.getElementById("d1");
if ('oninput' in input) {
input.oninput = function() {
output.textContent = this.value;
}
} else {
// IE6-8
input.onpropertychange = function() {
output.innerText = this.value;
}
}
})();
</script>
</body>
</html
Цитата:
|
| Часовой пояс GMT +3, время: 00:45. |