Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > изменить контент динамически

Автор: zoidberg 23.7.2006, 05:14

сабж...

Код


<script type="text/javascript">
    document.onkeyup = prnt;
    var buffer = "";
    var inpcode = "<input type=\"text\" id=\"in\" /><br />";
    function prnt(ev) {
        if(!ev)ev = window.event;
        var src =  ev.target || ev.srcElement;
        if(src == document.getElementById("in")) {
            buffer = document.getElementById("in").value;
            document.getElementById("magic").innerHTML = inpcode + buffer;
        }
        document.getElementById("in").value = buffer;
        document.getElementById("in").focus();
    }
</script>
<form id="magic">
    <input type="text" id="in" /><br />
</form>

Писал под firefox, а потом подправил под другие браузеры и хлоп... косяки посыпались.
В опере фокус падает в начало строки и получается зеркальный текст. А осел сообщил о "неизвестной ошибке выполнения" в строке 10, символ 4.(че ему не нравится?) Отвратительно. smile

А вся беда из-за innerHTML и обновления всей странички. Есть другие способы?

Автор: 12345c 23.7.2006, 07:38

Вы стираете точку вызова функции onkeyup и удивляетесь, почему она перестала работать smile

Автор: zoidberg 23.7.2006, 15:01

Цитата(12345c @ 23.7.2006, 07:38)

Вы стираете точку вызова функции onkeyup и удивляетесь, почему она перестала работать smile

А подробней? Наверно стираю, но я ж новичок! smile

Автор: zoidberg 23.7.2006, 15:22

А так это в 10й строке? Т.е innerHTML трет <input> и IE ругается? В опере и ff работает... я и подумать не мог. Но с этим ладно. А иначе можно страницу изменить без рефреша?

Автор: Avb 25.7.2006, 17:33

Вот то, что ты хотел получить:

Код


<script type="text/javascript">
    document.onkeyup = prnt;
    function prnt(ev) {
    var buffer = "";
        if(!ev)ev = window.event;
        var src =  ev.target || ev.srcElement;
        if(src == document.getElementById("in")) {
            buffer = document.getElementById("in").value;
            document.getElementById("magic").innerHTML = buffer;
        }
        document.getElementById("in").value = buffer;
    }
</script>
<form>
    <input type="text" id="in" /><br />
</form>
<span id="magic"></span>

Цитата(zoidberg @ 23.7.2006, 15:22

)

А иначе можно страницу изменить без рефреша?

Почитай про DOM.
Если нужен обмен данными с сервером, почитай про AJAX.

P.S. Google знает все

Автор: zoidberg 26.7.2006, 04:11

Цитата(Avb @ 25.7.2006, 17:33)

Вот то, что ты хотел получить...

Код


<span id="magic"></span>

Дык в том-то и дело, что я хотел использовать поменьше html элементов.(код для примера был) Думал все генерить динамически с помощью js, а потом заметил, что разные браузеры с innerHTML играются по-разному. Но, судя по ответам, универсальный код с похожей функцией будет сложно реализовать...(невозможно?)

Автор: skyboy 26.7.2006, 08:07

Цитата(zoidberg @ 26.7.2006, 04:11

)

универсальный код с похожей функцией

какой именно? объясни на пальцах, сам ведь признал что твой код некорректно(не так, как ты хотел) в разных браузерах работает. касательно DOM - лучше найти хороший учебник/справочник. От себя могу порекомендовать только http://wdh.suncloud.ru/dhtml01.htm

Автор: Avb 26.7.2006, 13:59

innerHTML - не единственный способ динамически генерить страницу средствами js.

Почитай про DOM. Вот что первое попалось:
http://www.quirksmode.org/dom/intro.html
http://xhtml.ru/category/dom_intro/

А вообще, действительно, напиши, что ты хочешь. Понятней будет, что тебе советовать.

Автор: zoidberg 27.7.2006, 04:27

Цитата(Avb @ 26.7.2006, 13:59)

А вообще, действительно, напиши, что ты хочешь. Понятней будет, что тебе советовать.

Хотел написать функцию, которая будет генерировать код сама. Т.е чтобы все формы с id magic генерировали на странице:

Код


<span id="magic">вводимые символы</span>

когда пользователь начинает набирать текст в инпуте. (если удастся без глюков реализовать это, то я хотел дальше плясать по схожей схеме, но уже динамически создавая таблицы...)
Знаю способы:
1) write(code); - не нравится т.к всю страницу переписывает.
2) innerHTML; - в firefox нет проблем, а в других браузерах с фокусом косяки.
Это все ради интереса. (т.е можно просто добавить <span id="magic"></span> и не париться, но захотелось иначе извратиться)
В идеале хочу:

Цитата

Верстальщик подключает js-код и назначает формам id="magic". Дальше в дело вступает javascript...

зы: с объектной моделью документов мне все понятно! smile

(мы её в коде и так используем). Лучше пните на конкретные ф-ии\методы и я почитаю про них на http://developer.mozilla.org/. smile

Автор: Avb 27.7.2006, 10:32

http://developer.mozilla.org/en/docs/Dynamically_modifying_XUL-based_user_interface
http://developer.mozilla.org/en/docs/XUL_Tutorial:Modifying_a_XUL_Interface

P.S. Стандарт W3C определяет id как уникальный идентификатор элемента.

Цитата(zoidberg @ 27.7.2006, 04:27

)

все формы с id magic

Может быть только одна форма с id "magic", иначе корректная работа скрипта не гарантируется.