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

0

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

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

Изображение 174551

Теги:
textarea
image

2 ответа

1
Лучший ответ

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

Поделиться
  • 0
    таким образом ? jsfiddle.net/xWanF
  • 0
    Означает ли это, что мне нужно проверить высоту и ширину окна браузера на то же самое, и в то же время я должен также проверить размер текстового поля?
Показать ещё 3 комментария
2

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

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 и textarea, чтобы их внешний вид в конечном итоге соответствовал друг другу. Я сделал это раньше, и это можно сделать совместимым с несколькими браузерами.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню