Javascript onchange - получить неопределенный при клике - PullRequest
Новая
       16

Javascript onchange - получить неопределенный при клике

0 голосов
/ 23 января 2012

Чтобы сделать текст «редактируемым», я написал функцию, которая заменяет текст элементом ввода (step1), а затем (onchange) заменяет текст значением элемента input (step2)

это работает, за исключением следующего сценария: если элемент ввода активен (шаг 1 процедуры) и я щелкаю элемент ввода, текст (в элементе ввода) заменяется на «неопределенный» ифункция больше не работает должным образом 

<html>
<head>

<title>Test</title>

<script type="text/javascript">
<!--

// global variables for use in (out-of-function) listeners
var changeText_actual;
var changeText_parent;

function changeText(actual) {
    // element representing a textNode
    changeText_actual = actual;
    // element containing the textNode
    changeText_parent = actual.parentNode;

    // create a new html-element to input text
    var textfield = window.document.createElement("input"); {
        textfield.setAttribute("type", "text");
        // text in textNode
        textfield.setAttribute("value", actual.data);
        // listener for when user has finished input (e.g. by pressing return)
        textfield.setAttribute("onchange",
             // if inputText is not empty
             "if(this.value && this.value.length > 0) {"
                 // fill textNode with inputText
            +"    changeText_actual.data = this.value;"
            +"}"
            // remove input-element and put textNode inplace
            +"changeText_parent.replaceChild(changeText_actual, this);"
        );
    }

    // remove textNode and put input-element inplace
    changeText_parent.replaceChild(textfield, changeText_actual);
    // select inputText for faster editing
    textfield.select();
}

//-->
</script>

</head>
<body>

<table border="1"><tr>
<th>1. Text</th><th onclick="changeText(this.firstChild)">2. Text</th><th>3. Text</th>
</tr><tr>
<td>4. Text</td><td>5. Text</td><td>6. Text</td>
</tr></table>

</body>
</html>

Я просто ищу объяснение, а не решение, так как я чувствую, что могу решить эту проблему, если я знаю, откуда взято «неопределенное» (игде я могу его поймать)

1 Ответ

1 голос
/ 23 января 2012

1 \ При первом нажатии на элемент

его первый дочерний элемент является текстовым узлом. Это атрибут данных "2. Текст". Поэтому, когда вы ссылаетесь на this.firstChild, это текстовый узел.

2 \ Функция changeText будет вызываться с текстовым узлом в качестве параметра, поэтому «фактическим» будет текстовый узел.

Затем вы изменяете текстовый узел на текстовое поле.

3 \ Когда вы щелкаете по текстовому полю, его родительский обработчик запускается снова (щелчок

), но на этот раз this.firstChild является тегом , поэтому функция будет вызвана с элементом ввода в качестве параметра. параметр «фактический» будет входным элементом. Элемент ввода не имеет атрибута с именем data, поэтому в строке 
    textfield.setAttribute("value", actual.data);

фактические данные не определены.

Это ответ на ваш вопрос, но я чувствую желание уточнить некоторые вещи:

На самом деле вы можете использовать textfield.onclick = function () {.....}, чтобы написать функцию, которая гораздо безопаснее.

Использование onchange для изменения текстового поля обратно на текст не всегда удобно (например, если вы не хотите что-либо менять), вам следует проверить, не теряет ли элемент и его фокус (размытие).

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

Похожие темы

...