Программное создание ввода текста с помощью JavaScript - PullRequest
Новая
       13

Программное создание ввода текста с помощью JavaScript

0 голосов
/ 17 октября 2011

В настоящее время я изучаю JavaScript, и я застрял в следующих проблемах: я попытался динамически создать ввод текста типа из JavaScript и установить его метод onChange, но он запускается только при загрузке страницы. Кроме того, document.onload не работает для создания ввода, но работает window.onload, хотя в прочитанных мною руководствах утверждается, что эти два понятия - почти одно и то же. Код следующий: 

<html>
    <head>
        <script type="text/javascript">
            function f(value) {
                alert(value);
                return true;
            }

            window.onload = function() {
                if (document.getElementById("cloned") == null) {
                     var clonedInput = document.createElement('input');
                     clonedInput.type = 'text';
                     clonedInput.value = "";
                     clonedInput.id = 'cloned';
                     clonedInput.size = 20;
                     clonedInput.onChange = f(clonedInput.value);
                     var lastChild = document.getElementById("parent");
                     document.body.insertBefore(clonedInput, lastChild);
                }
            };
        </script>
    </head>
    <body>
        <input id="toClone" type="text"/>
        <div id="parent"></div>
    </body>
</html>

Ответы [ 2 ]

4 голосов
/ 17 октября 2011

f(clonedInput.value) немедленно вызывает функцию и устанавливает ее возвращаемое значение (в данном случае true) в качестве обработчика события.

Вы хотите использовать анонимную функцию: 

clonedInput.onchange = function(){ f(this.value); };

Примечание: Хотя атрибуты HTML не чувствительны к регистру, свойства объекта JavaScript - нет.

2 голосов
/ 17 октября 2011

Вы можете фактически клонировать существующий элемент ввода: 

if (document.getElementById("cloned") == null) {
     var clonedInput = document.getElementById("toClone").cloneNode(true);
     clonedInput.id = 'cloned';
     clonedInput.onchange = f;
     var lastChild = document.getElementById("parent");
     document.body.insertBefore(clonedInput, lastChild);
}

Теперь, чтобы прочитать значение, измените f на это: 

function f() {
    var value = this.value;
    alert(value);
    return true;
}

Редактировать: чтобы клонированный ввод отражал первое «живое», вам нужно прикрепить пару событий: 

if (document.getElementById("cloned") == null) {
     var orgInput = document.getElementById("toClone");
     var clonedInput = orgInput.cloneNode(true);
     clonedInput.id = 'cloned';
     clonedInput.onchange = f;
     orgInput.onkeypress = ReflectValue;
     orgInput.onchange = ReflectValue;
     var lastChild = document.getElementById("parent");
     document.body.insertBefore(clonedInput, lastChild);
}

Тогда имейте эту функцию: 

function ReflectValue() {
    var cloned = document.getElementById("cloned");
    cloned.value = this.value;
}

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...