VPF::Совместить тэги SELECT и INPUT - Форум программистов

swetik1981

Дата 16.6.2010, 23:33 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 117
Регистрация: 20.12.2007

Репутация: нет
Всего: нет

Такая проблема: пишу програмку, интерфейс которой образуют веб-страницы, загружаемые через WebBrowser.
В загружаемой веб-странице необходимо разместить элемент формы, совпешающий в себе возможности текстового поля (<INPUT type="Text"><INPUT>) и разворачивающегося списка (<SELECT></SELECT>).
То есть пользователь должен иметь возможность выбрать из списка одно из значений или, при отсутствии подходящего, ввести через клавиатуру своё значение.
Что-то подобное использует Яндекс: когда вводишь в строку запроса слова, под строкой появляется поле с возможными продолжения вводимого слова.
Как не мудрил - ничего не получается. Может кто что подскажет...

DeamonShan

Дата 16.6.2010, 23:55 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 503
Регистрация: 26.11.2005

Репутация: нет
Всего: 6

Спрятать список в <div style="visibility: none">{LIST}</div> под тэгом <input>... сделать справа от поля инпут стрелку вниз, при нажатии которой покажется скритый <div>... при выборе из списка вставить слово или фразу в инпут, а если нет, то посетитель вводит сам в инпут...содержимое инпута отправить на сервер на обработку...

--------------------

Извеняюсь за свой русский)))

mcTep

Дата 17.6.2010, 10:35 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 203
Регистрация: 25.2.2009

Репутация: 3
Всего: 6

Можно сделать немного проще:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title></title>
        <style type="text/css">
            .select-and-input {
                position: relative;
                height: 30px;
                width: 100px;
            }
            .select-and-input select {
                position: absolute;
                z-index: 0;
                top: 0;
                left: 0;
                height: 24px;
                width: 100px;
            }
            
            .select-and-input input {
                position: absolute;
                z-index: 1;
                top: 0;
                left: 0;
                height: 20px;
                padding:0;
                width: 78px;
            }
        </style>
    </head>
    <body>
     <form>
            <div class="select-and-input">
                <select name="selectName" onchange="parentNode.getElementsByTagName('input')[0].value=value">
                    <option value="Value1">Value1</option>
                    <option value="Value2">Value2</option>
                    <option value="Value3">Value3</option>
                    <option value="Value4">Value4</option>
                    <option value="Value5">Value5</option>
                </select>
                <input type="text" name="inputText"/>
            </div>
        </form>
    </body>
</html>

Там для своих целей поиграйся с размерами объектов.

swetik1981

Дата 27.6.2010, 14:42 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 117
Регистрация: 20.12.2007

Репутация: нет
Всего: нет

Спасибо!
Всё работает отлично!

xELENAx

Дата 21.2.2014, 11:31 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 2
Регистрация: 14.2.2014
Где: Москва

Репутация: нет
Всего: нет

Ребят, как совместить текст и input?
<input type="checkbox" name="autologin" value="1">Автовход
что бы назначить общий класс в css/

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »