7

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

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

1
  • отлавливаем в ajax режиме нужное тебе действие , и меняем css элементу на то которое тебе нужно
    – Gam-Studio
    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
    7 июл 2016 в 19:53
  • @sercxjo, в CSS стили для элемента под курсором определяются с помощью :hover; например, в следующем примере при наведении курсора на поле изменяется цвет нижней границы: jsfiddle.net/yh2c6860. Также по умолчанию изменяется курсор на тип text ... 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
    7 июл 2016 в 20:10
  • Извините, не сразу понял, не тот пример проверял, всё меняется
    – sercxjo
    7 июл 2016 в 20:12
  • Всё-таки шрифт отличается от обычного текста
    – sercxjo
    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
    8 июл 2016 в 5:52
  • @kff Если действительно поддержка есть всеми браузерами, как там написано, то я склоняюсь в сторону contenteditable
    – sercxjo
    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/>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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