Javascript.RU

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

Как разбить input на заданное число ячеек как в кроссворде?
Можно ли средствами CSS визуально представить поле input type="text" как набор квадратов, по типу как это сделано в кроссворде? Чтобы поле input было одно, но пользователь видел, что он может ввести только определенное количество букв. И соответственно, чтобы введённые буквы визуально попадали в эти квадраты.
Ответить с цитированием
  #2 (permalink)  
Старый 17.08.2014, 22:12
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

Ну теоритически чисто на css можно:
<input type="text" value="слово" maxlength="9">
<style>
input{
    background-image: repeating-linear-gradient(90deg, #000, #000 1px, transparent 1px, transparent 31px);
    font: 20px Consolas, monotype;
    letter-spacing: 20px;
    padding: 5px 10px;
    margin:0;
    width: 311px; 
    border: none;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}
</style>

Но с кучей оговорок.)
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 20.08.2014, 10:28
Аватар для hfts_rider
Профессор
Отправить личное сообщение для hfts_rider Посмотреть профиль Найти все сообщения от hfts_rider
 
Регистрация: 26.01.2014
Сообщений: 181

А чем плох вариант с несколькими инпатами?
(как это делается на различных сайтах, допустим "Приват Банк", что бы войти тебе нужно ввести цифры с паролем, там несколько инпатов и по мере набора они перепрыгивают в следующие).

Или действительно на подобии как представлено выше, просто делаешь большой отступ между буквами и делаешь бекграунд на определенное количество кусков.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как отделить нажатие кл. Enter в поле INPUT от нажатия Enter в выпадающем списке? Маэстро Events/DOM/Window 7 18.07.2012 09:11
Как сверстать input без картинок greatilya (X)HTML/CSS 26 26.01.2012 16:10
Как правильно очистить maxlength в input? Маэстро Events/DOM/Window 10 22.06.2011 18:14
Разбить число на миссив, как ? Bogdan808 Общие вопросы Javascript 20 01.09.2010 18:19
Разным элементам input - разное форматирование. Как? eclipse (X)HTML/CSS 1 25.10.2007 13:55