Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Appending button to textarea

What I'm trying to do is append a button into a textarea's bottom right corner, like this:

enter image description here

However, I have no idea how I'd do this. Please help!

like image 814
John Smith Avatar asked Jun 05 '13 00:06

John Smith


People also ask

How to append text to textarea in javascript?

To add text to a textarea, access the value property on the element and set it to its current value plus the text to be appended, e.g. textarea. value += 'Appended text' . The value property can be used to get and set the content of a textarea element.

How do you make a button that adds text in HTML?

The <button> element is used to create an HTML button. Any text appearing between the opening and closing tags will appear as text on the button.

How do I display HTML content in textarea?

Complete HTML/CSS Course 2022Use the <textarea> tag to show a text area. The HTML <textarea> tag is used within a form to declare a textarea element - a control that allows the user to input text over multiple rows. Specifies that on page load the text area should automatically get focus.


3 Answers

You can use css to position the button there absolutely.

Here is a demo: http://jsfiddle.net/GwheP/

div{
  display:inline-block;
  position:relative;
}

button{
  position:absolute;
  bottom:10px;
  right:10px;
}

textarea{
  display:block;
}
<div>
  <textarea name="" id="txt" cols="20" rows="5"></textarea>
  <button>Submit</button>
</div>
like image 51
Miro Avatar answered Oct 20 '22 21:10

Miro


Try the following,

<div id='container' style='width:600px; border:1px solid black;'>
    <textarea style='border-style:none none dashed none; border-color:black; width:100%; display:block;box-sizing:border-box;border-width:1px; margin-bottom:1px;'></textarea>
    <div style='width:100%; box-sizing:border-box; height:35px;padding:5px;'>
        <button style='float:right'>Lama mama
        </button>
    </div>
</div>

Also here.

like image 5
WhyMe Avatar answered Oct 20 '22 19:10

WhyMe


Live Demo

HTML

<div class="wrapper">
    <textarea name="somename" id="" cols="20" rows="10"></textarea>
    <div class="controls">
        <button>Post as Anonymous</button>
    </div>
</div>

CSS

*{
    padding: 0;
    margin:0;
}
.wrapper{
    background: #eee;
    border: 1px solid #999;
    width: 600px;
}
.wrapper textarea{
    background: linear-gradient(to bottom, #e5e5e5 0%,#f2f2f2 100%);
    border:none;
    width:100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1px dotted #999;
    resize: none;
}
.wrapper textarea:focus{
    outline: none;
}
.controls{
    text-align: right;
    margin-top: -6px;
}
button{
    background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    border: 1px solid #999;
    padding: 10px 25px;
    font-weight: bold;
    color: rgb(77,77,77);
    border-width: 1px 0 0 1px;
}
like image 5
Rajender Joshi Avatar answered Oct 20 '22 20:10

Rajender Joshi