CODEWITHSUNDEEP
cssimagehtmltextarea
Zerotoinfinity
Zerotoinfinity

Reputation: 6540

How to include by default icon inside a textarea

I was trying to insert a image inside a textarea but that seems to be impossible other than using contenteditable ="true" attribute of textarea. Meanwhile, I check diaspora site and I found that it can be possible. I ain't sure how that has been done. Is that really a textarea or some css trick via using div ? How can I implement the same?

Below image is a representation of that functionality:

enter image description here

Upvotes: 0

Views: 10440

Answers (2)

BumbleB2na
BumbleB2na

Reputation: 10743

For things like this you are better off swapping out a textarea with an element to show a more complex display, using .click() and .blur() events. Here is an example that you can play around with.

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();
});

You could take my example much further, playing around with CSS of the div and textarea so that their appearance eventually matches each other. I have done this before and it can be made to be cross-browser compatible.

Upvotes: 3

Dev Utkarsh
Dev Utkarsh

Reputation: 1496

You have to use div that covers over the text area so that you can select image and submit form as multipart. Its totally game of CSS. You can use absolute div to position the button or image, all you need to do is to calculate the position w.r.t. the text area. Check out this, the similar post at link

Upvotes: 1

Related Questions