Форум

LeonidAndAnd · #1 (**permalink**) 22.03.2013, 11:05

В моей теме "Вопросы новичка" никто не ответил, видимо я хочу многого или мне просто лень читать. Хотя я и просил, чтобы направили только.
Ну ладно, разделю на подзадачи свою задачу.
Предположим, что нужно на страничке отобразить однострочное поле редактирования, а под ним текстовую метку. В этой текстовой метке будет находиться текущее содержимое поля ввода.
Как это реализуется в вебе на JavaScript??
Я прекрасно понимаю, как это для десктопа бы делалось, но для веба, не представляю.

Спасибо

rgl · #2 (**permalink**) 22.03.2013, 11:35

Так, что ли?

<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>

LeonidAndAnd · #3 (**permalink**) 22.03.2013, 11:40

rgl,
Спасибо большое! Почти так! Только нужно, чтобы в метке отображался текст до нажатия Enter тоже. Т.е. я ввожу в поле ввода символ (или стираю его) и метка тоже изменяется.

tsigel · #4 (**permalink**) 22.03.2013, 11:45

<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>

LeonidAndAnd · #5 (**permalink**) 22.03.2013, 12:35

И еще вопрос. Допустим страничка будет посложнее, кода соответственно больше. Можно же будет весь код вынести в отдельный *.js файл, а на страничке прописать только в теге script путь к файлу *.js? И если да, то можно ли создать для каждого обработчика, например, отдельный файл? Т.е. файлов с кодом будет несколько, чтобы не было одного большого файла. И как тогда прописать на страничке? Несколько тегов <script> ??

tsigel · #6 (**permalink**) 22.03.2013, 12:42

Вынести скрипты в отдельные файлы конечно можно, и сделать по файлу на обработчик тоже можно. Только не переусердствуйте с количеством файлов, т.к. каждый файл - запрос на сервер.
Чтобы подключить файл скрипта надо написать:

<script src="js/fileName.js"></sctipt>

Т.е мы указываем путь к файлу относительно текущего файла и название.

danik.js · #7 (**permalink**) 22.03.2013, 12:50

Этот вариант также учитывает варианты вставки из контекстного меню, перетаскивания текста мышкой и прочие методы ввода.

<!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

Сообщение от LeonidAndAnd

можно ли создать для каждого обработчика, например, отдельный файл? Т.е. файлов с кодом будет несколько, чтобы не было одного большого файла

В dev-версии можно. В продакшне все нужно сливать в один файл и пропускать через минификатор.

Форум

Справочник

Discord чат

Курсы javascript