Как сделать div для входной текстовой формы?

Есть некоторые недостатки, использующие textarea и input-text в качестве ввода текстовых форм. textarea имеет немного раздражающий треугольник в правом нижнем углу, а ввод-текст - однострочный.Как сделать div для входной текстовой формы?

Я стараюсь иметь входной текст, такой как форма ввода обновления facebook. Автоматическое изменение ввода после разрывов строк. И используемым элементом или тегом был <div>. Я сказал «используется», потому что после того, как они переработали Facebook, я не могу понять, какой тег используется сейчас. Существует свойство CSS, которое позволяет пользователю редактировать текст в элементе div. Я фактически скопировал свойство CSS, но теперь я его потерял. Может ли кто-нибудь сказать мне, какое свойство CSS это было? У меня есть слабая память, что она началась с -webkit префиксом хотя

источник

2011-01-02 einstein

Чтобы выяснить, что такое элемент, с Chrome, Safari и Firefox (возможно, Opera тоже), щелкните правой кнопкой мыши элемент и в контекстном меню выберите «Проверить элемент» (или эквивалентную опцию). В Facebook это определенно «textarea». –

Если вы используете html5 вы можете использовать:

<div id="divThatYouCanWriteStuffIn" contenteditable> 
<!-- you can write in here --> 
</div>

Если вы пара это с помощью CSS:

#divThatYouCanWriteStuffIn { 
    min-height: 4em; /* it should resize as required from this minimum height */ 
}

Чтобы избавиться от «надоедливого маленького треугольника» в textarea s:

textarea { 
    resize: none; 
}

JS Fiddle demo of both ideas.

источник

2011-01-02 22:30:09

ОК спасибо! Это была очень полезная информация – einstein

, это одна из лучших вещей, которые произошли со мной сегодня. Огромное спасибо! –

Я знаю, что вы можете сделать это в JavaScript, делая getElementByID('mydiv').contentEditable='true';, но я не знаю, как это будет сделано в CSS

источник

2011-01-02 22:25:36 Colum

Насколько я знаю, невозможно w/CSS. Вы можете установить его inline tho. '

' – JCOC611

Да, это сработало, но как я могу изменить размер после разрыва строки? Нет прокрутки, хотя – einstein

CSS стиль 'height: auto'? – JCOC611

Поле ввода обновления Facebook является элементом TEXTAREA. Хитрость заключается в том, чтобы использовать resize свойство:

textarea { resize:none; }

Это сделает треугольник исчезнет.

источник

2011-01-02 22:31:02

Вы должны быть в состоянии добавить свой стиль в текстовое поле, как вы делаете с тегами, как р, h1, h2 и т.д. ..

Таким образом, вы можете настроить таргетинг на все или те, текстовые областях с конкретными классами или идентификаторами на них

Пример:

textarea { 
    font-size:11px; 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
    font-weight:normal; 
    line-height:140%; 
    color:black; 
    margin:0 0 5px 5px; 
    padding:5px; 
    background-color:#999999; 
    border:1px solid black; 
}

в этом примере будет направлен все на текстовых областях страницы. Измените textarea на .nameOfClass или #nameOfId, если вы хотите настроить таргетинг на класс или идентификатор.

Надеюсь, это поможет.

источник

2011-01-02 22:32:18 brenjp

Как сделать div для входной текстовой формы?

ответ

Смежные вопросы