7

Как сделать, чтобы <input type="text"> выглядел как обычный текст, и только при получении фокуса или наведении мыши становился как <input>?

Возможно ли, чтобы и ширина поля изменялась в соответствие с длиной введённой строки?

1
  • отлавливаем в ajax режиме нужное тебе действие , и меняем css элементу на то которое тебе нужно
    – Gam-Studio
    Commented 7 июл. 2016 в 19:09

5 ответов 5

14

Если я вас правильно понял, то вам нужно поле, подобное тому, как-будто мы пишем текст на обычной бумаге. Если так, то это можно реализовать таким образом:

h3 {
  text-align: center;
}

p.with-fields {
  /* Чтобы поясняющий текст не наезжал на следующую строку */
  line-height: 2.1em;
  text-align: justify;
}

/* Бокс-wrapper */

[data-hint] {
  /* Чтобы спозиционировать относительно данного элемента бокс поясняющего текста */
  position: relative;
}

/* Бокс поясняющего текста */

[data-hint]::after {
  /* Получаем контент из атрибута «data-hint» */
  content: attr( data-hint);
  font-size: .6em;
  position: absolute;
  bottom: -2.6em;
  /* Устанавливаем ширину равной ширине <input> */
  width: 100%;
  /* Сдвигаем бокс до конца влево, чтобы он совпал с <input> */
  left: 0;
  text-align: center;
}

input.as-text {
  /* Наследуем фон, так как он по умолчанию белый */
  background: inherit;
  border: 0;
  border-bottom: 1px solid;
  /* Наследуем характеристикИ шрифта, так как он по умолчанию специфичный */
  font: inherit;
  /* Сбрасываем высоту строки, так как она унаследовалась вместе со шрифтом от «p.with-fields» */
  line-height: normal;
  /* Убираем рамку, которая добавляется при фокусе на элементе */
  outline: 0;
  padding: 0;
  text-align: center;
}

input.as-text.full-name {
  width: 15em;
}

input.as-text.date {
  width: 7em;
}

p.with-fields.signature {
  text-align: right;
}

input.as-text.signature {
  width: 7em;
}
<h3>Объяснительная</h3>

<p class="with-fields">
  Я,
  <span data-hint="ФИО">
    <input class="as-text full-name">
  </span>,
  <span data-hint="Дата">
    <input class="as-text date">
  </span>
  был замечен курящим за углом школы во время занятий.
</p>

<p class="with-fields signature">
  <span data-hint="Подпись">
    <input class="as-text signature">
  </span>
</p>

https://jsfiddle.net/53mjdx3r/

2
  • Интересное решение. Хотелось чтобы поле ничем не отличалось от обычного текста, но меняло вид при наведении мыши
    – sercxjo
    Commented 7 июл. 2016 в 19:53
  • @sercxjo, в CSS стили для элемента под курсором определяются с помощью :hover; например, в следующем примере при наведении курсора на поле изменяется цвет нижней границы: jsfiddle.net/yh2c6860. Также по умолчанию изменяется курсор на тип text ... Commented 7 июл. 2016 в 20:03
12

Проще всего это сделать при помощи псевдо-класса :not():

input[type=text]:not(:focus) {
  border: 0;
}
<input type="text" value="Text Text Text">

Если же нужно чтобы поле ввода отображалось и при наведении курсора мыши, то CSS-селектор становится немного посложнее:

input[type=text]:not(:focus):not(:hover) {
  border: 0;
}
<input type="text" value="Text Text Text">

3
  • @sercxjo Chromium 52.0.2723.0, Chrome 51.0.2704.106 m, Firefox 47.0.1, Internet Explorer 11.0.9600.18349 (11.0.32), все на Windows 7 - всё меняется.
    – user194374
    Commented 7 июл. 2016 в 20:10
  • Извините, не сразу понял, не тот пример проверял, всё меняется
    – sercxjo
    Commented 7 июл. 2016 в 20:12
  • Всё-таки шрифт отличается от обычного текста
    – sercxjo
    Commented 7 июл. 2016 в 20:24
7

Изменил и дополнил ответ @kff, вот что получилось:

input[type=text]{
  font: inherit;
  padding: inherit;
  margin-left: -2px; /* компенсировать border, раздвигающий текст */
  width:auto; /* не работает */
  display: inline; /* тоже */
}    
input[type=text]:not(:focus):not(:hover) {
  border-color: transparent;
  color: inherit;
  background: inherit;
}
Text--<input type="text" value="--Text-Text-Text--">--Text

Без javascript видимо изменить ширину поля ввода под размер текста невозможно. Ниже вариант с javascript.

function adjustsize(inp) {
  var tmp=document.createElement("span");;
  for(var i=0, l=inp.attributes.length; i < l; ++i){
	var nodeName  = inp.attributes.item(i).nodeName;
	var nodeValue = inp.attributes.item(i).nodeValue;
	tmp.setAttribute(nodeName, nodeValue);
  }
  tmp.innerHTML=inp.value.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
  tmp.classList.add("tmp");
  tmp.style.width="auto";
  inp.parentNode.insertBefore(tmp, inp);
  inp.style.width=tmp.getBoundingClientRect().width+"px";
  inp.parentNode.removeChild(tmp);
}
input[type=text]{
  font: inherit;
  padding: inherit;
  margin-left: -2px; /* компенсировать border, раздвигающий текст */
  margin-right: -2px;
}    
input[type=text]:not(:focus):not(:hover) {
  border-color: transparent;
  color: inherit;
  background: inherit;
}
.tmp {
  visibility: hidden;
  white-space: pre;
  position: absolute;
}
Text--<input type="text" value="--Text-Text-Text--" onchange=adjustsize(this) class=kgb>--Text

Код заимствован и доработан. Размер меняется только после редактирования, но это потом можно доделать.

2
  • 1
    Х.з. как сменить ширину input'а по размеру текста. Похоже, без JS не обойтись. Но можно вместо input исрользовать div или span с атрибутом contenteditable="true". htmlbook.ru/html/attr/contenteditable, ru.stackoverflow.com/q/498435/194374.
    – user194374
    Commented 8 июл. 2016 в 5:52
  • @kff Если действительно поддержка есть всеми браузерами, как там написано, то я склоняюсь в сторону contenteditable
    – sercxjo
    Commented 8 июл. 2016 в 5:59
1
input[type=text]{border:none; background: transparent;}
input[type=text]:focus, input[type=text]:active{border:1px solid #fff; background: #fff;}
0

input {
border:none;
background:none;
}
input:focus, input:hover {
border:1px solid #A9A9A9;
background:white;
}
<input/>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.