Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.09.2013, 16:14
Интересующийся
Отправить личное сообщение для alexandr_ftf Посмотреть профиль Найти все сообщения от alexandr_ftf
 
Регистрация: 02.09.2013
Сообщений: 11

Взаимодействие с пользователем без сервера
Возможно ли реализовать ввод пользователем нескольких переменных сразу (по типу формы)?
prompt и confirm позволяет только последовательный ввод.
Ответить с цитированием
  #2 (permalink)  
Старый 02.09.2013, 16:37
Профессор
Отправить личное сообщение для Яростный Меч Посмотреть профиль Найти все сообщения от Яростный Меч
 
Регистрация: 12.04.2010
Сообщений: 557

накидать несколько инпутов на страницу.
Ответить с цитированием
  #3 (permalink)  
Старый 02.09.2013, 18:37
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Вот могу дать быстрый вариант, не очень хорошо сделан, но работает:
<script type="text/javascript">
function multiPrompt(options, callback) {
    var wrapper = document.createElement('div');
    wrapper.style.cssText = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%;';
    wrapper.innerHTML = '<div style="position: fixed; width: 100%; height: 100%; background: #000; opacity: 0.05;' +
        'filter: Alpha(opacity=5);"></div><table style="position: relative; margin: auto; height: 100%;"><tr><td>' +
        '<div style="position: relative; background: #FBFBFB; border: 1px solid #BFBFBF; border-radius: 4px;' +
        'box-shadow: 0 2px 3px rgba(0,0,0,0.6); padding: 10px;"><div></div><div style="padding: 10px 0 0 0;' +
        'float: right;"><button style="border: 1px solid #bfbfbf; width: 80px; margin-left: 10px;height: 25px;' +
        '">Ок</button><button style="border: 1px solid #bfbfbf; width: 80px; margin-left: 10px; height: 25px;' +
        '">Отмена</button></div><div style="clear: both;"></div></div></td></tr></table>';

    options = options instanceof Array ? options : [[options]];
    var inputsBox = wrapper.getElementsByTagName('div')[2];
    for(var i = 0; i < options.length; i++) {
        options[i] = options[i] instanceof Array ? options[i] : [options[i]];
        var titleDiv = document.createElement('div');
        titleDiv.innerHTML = typeof options[i][0] === 'undefined' ? '' : options[i][0];
        inputsBox.appendChild(titleDiv);
        var input = document.createElement('input');
        input.style.minWidth = '300px';
        input.style.width = '100%';
        input.type = 'text';
        input.value = typeof options[i][1] === 'undefined' ? '' : options[i][1];
        inputsBox.appendChild(input);
    }
    var buttons = wrapper.getElementsByTagName('button');
    var cancel = function(e) {
        e = e || window.event;
        if (e.type == 'keydown') {
            if (e.keyCode !== 27) {
                return;
            }
        }
        if (document.removeEventListener) {
            document.removeEventListener('keydown', cancel);
        } else {
            document.detachEvent('onkeydown', cancel);
        }
        wrapper.parentNode.removeChild(wrapper);
    }
    buttons[0].onclick = function() {
        var inputs = wrapper.getElementsByTagName('input');
        var results = [];
        for(var i = 0; i < inputs.length; i++) {
            results[results.length] = inputs[i].value;
        }
        cancel({});
        callback && callback(results);
    }
    buttons[1].onclick = cancel;
    if (document.addEventListener) {
        document.addEventListener('keydown', cancel);
    } else {
        document.attachEvent('onkeydown', cancel);
    }

    document.body.appendChild(wrapper);
}
</script>
<button onclick="multiPrompt(['Имя', 'Фамилия', 'Отчество'], function(a){alert(a)})">Показать окно 1</button>

<button onclick="multiPrompt([['Имя', 'Иван'], ['Фамилия', 'Иванов'], ['Отчество', 'Иванович']], function(a){alert(a)})">Показать окно 2</button>

<button onclick="multiPrompt('Введите число', function(a){alert(a)})">Показать окно 3</button>
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine

Последний раз редактировалось devote, 04.09.2013 в 16:35.
Ответить с цитированием
  #4 (permalink)  
Старый 03.09.2013, 01:28
Интересующийся
Отправить личное сообщение для alexandr_ftf Посмотреть профиль Найти все сообщения от alexandr_ftf
 
Регистрация: 02.09.2013
Сообщений: 11

devote
Спасибо, то что надо!)
Ответить с цитированием
  #5 (permalink)  
Старый 04.09.2013, 14:49
Интересующийся
Отправить личное сообщение для alexandr_ftf Посмотреть профиль Найти все сообщения от alexandr_ftf
 
Регистрация: 02.09.2013
Сообщений: 11

Всё хорошо, только в данном скрипте перенос строки зачем-то заменяется пробелом.(
Ответить с цитированием
  #6 (permalink)  
Старый 04.09.2013, 15:43
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от alexandr_ftf
только в данном скрипте перенос строки зачем-то заменяется пробелом.(
теперь не будет
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #7 (permalink)  
Старый 04.09.2013, 16:33
Интересующийся
Отправить личное сообщение для alexandr_ftf Посмотреть профиль Найти все сообщения от alexandr_ftf
 
Регистрация: 02.09.2013
Сообщений: 11

Ничего не изменилось.
Ответить с цитированием
  #8 (permalink)  
Старый 04.09.2013, 16:34
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от alexandr_ftf
Ничего не изменилось.
ну значит я не понял что ты имеешь ввиду, у меня нигде пробелы не подставляются, по крайней мере теперь.. Изучи код, и посмотри что там и намека о подставленных пробелах нету.
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #9 (permalink)  
Старый 04.09.2013, 16:37
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

если ты пытаешься делать так:
multiPrompt('Введите \n число', function(a){alert(a)})
то это бесполезно, нужно писать именно тег BR:
multiPrompt('Введите <br />число', function(a){alert(a)})
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #10 (permalink)  
Старый 04.09.2013, 16:43
Интересующийся
Отправить личное сообщение для alexandr_ftf Посмотреть профиль Найти все сообщения от alexandr_ftf
 
Регистрация: 02.09.2013
Сообщений: 11

Так это не критика кода ни в коей мере). Просто сам промпт при копировании туда многострочного текста работает как надо.
В самом промпт символа перевода строки нет, но если делать перемещение между символами стрелочками увидим, что он там есть, только невидим. В твоём скрипте он заменяется пробелом.
Для меня это ключевой момент, так как вводится будет скопированный текст.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
cookies js без сервера? Влад31/08/2000 Серверные языки и технологии 1 31.08.2012 12:05
"success" и "failure" приём данных с сервера ??? potkin ExtJS 8 30.05.2012 09:27
Загрузка изображения в Объект без сервера. xaknik Элементы интерфейса 1 24.02.2012 14:10
Как вы передаёте в js переменные с сервера без ajax? akostrikov Серверные языки и технологии 1 09.10.2011 21:45
Как получить рисунок с сервера без сохранения в файле maruany AJAX и COMET 1 17.06.2010 10:15