Как добавить значок по умолчанию в текстовое поле

Я пытался вставить изображение внутри текстового поля, но это кажется невозможным, кроме использования атрибута contenteditable ="true"textarea. Тем временем я проверяю сайт diaspora, и я обнаружил, что это возможно. Я не знаю, как это было сделано. Это действительно textarea или некоторые css трюк с помощью div? Как я могу реализовать то же самое?Как добавить значок по умолчанию в текстовое поле

Ниже изображения является представлением этой функциональности:

enter image description here

источник

2013-09-23 Zerotoinfinity

Если вы проверите элемент в своем браузере, вы, вероятно, обнаружите, что значок просто абсолютно расположен над текстовым полем. Трудная часть будет заключаться в том, как реализовать это с изменяемым размером текстового поля. В этом случае вам, вероятно, понадобится использовать javascript для вычисления размера текстового поля и применения этих измерений к содержащему элементу div. – Jbird

Вы должны использовать DIV, который охватывает над текстовой областью, так что вы можете выбрать изображение и отправить форму в многоголосном. Полная игра в CSS. Вы можете использовать абсолютный div для позиционирования кнопки или изображения, все, что вам нужно сделать, это вычислить позицию w.r.t. текстовой области. Проверьте это, аналогичный пост в link

источник

2013-09-23 21:58:18 devutkarsh

таким образом? http://jsfiddle.net/xWanF/ – Zerotoinfinity

Означает ли это, мне нужно проверить высоту и ширину окна браузера для того же самого и в то же время мне нужно также проверить размер текстового поля? – Zerotoinfinity

Отметьте это, аналогичный пост в [link] (http://stackoverflow.com/questions/15314407/how-to-add-button-inside-input) – devutkarsh

Для таких вещей, как это вы лучше выгрузив в текстовое поле с элементом, чтобы показать более сложный дисплей, используя .click() и .blur() события. Here is an example, с которым вы можете поиграть.

HTML:

<div class="container"> 
    <textarea class="text-area hidden"></textarea> 
    <div class="text-area icon-example"></div> 
</div>

CSS:

.container { 
    position: relative; 
    display:inline-block; 
} 
.text-area { 
    width: 200px; 
    height: 50px; 
    border:1px solid #ccc; 
    display:inline-block; 
} 

.icon-example:after { 
    content: url(http://www.stat.ncsu.edu/dept-icons/camera-icon.gif); 
    position:absolute; 
    z-index:9999; 
    right: 3px; 
    bottom: 6px; 
} 

.hidden { 
    display:none; 
}

JQuery:

$('.text-area').click(function() { 
    $(this).hide(); 
    $(this).parent().find('textarea').show(); 
}); 
$('textarea').blur(function() { 
    $(this).parent().find('div').text($(this).val()).show(); 
    $(this).hide(); 
});

Вы можете взять мой пример гораздо дальше, играя с CSS в DIV и текстовое поле, так что их внешний вид в конечном итоге соответствует друг другу. Я сделал это раньше, и это можно сделать совместимым с несколькими браузерами.

источник

2013-09-23 22:14:28 BumbleB2na

Как добавить значок по умолчанию в текстовое поле

ответ

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