We Keep Coding

How to add button inside textarea using Javascript?

My client wants me to create a textarea inside where there has to be a button like the below picture:
Into the above pictue please follow into the right side of the picture where you can see blue color braces which is the button.
This has to be work like this 2nd picture on-click (like drop down):
Into the 2nd pictue we can see that upon clicking on the braces button the list has opened and clicking on an option from the list is writing on the Textarea. But this whole thing should work in client side i.e. using Javascript or Jquery in which I'm quite new at. So, I could not start on this. I need your wise suggestion on the above regarding how may I achieve the following meanwhile I'm also doing my research if I get to know anything then I will update my question or answer my question for other. Thanks in advance.

To achieve this you can place both the textarea and button within the same div which has position: relative set on it. You can then make the button position: absolute and put it in the top right. Something like this:
.textarea-container {
position: relative;
}
.textarea-container textarea {
width: 100%;
height: 100%;
box-sizing: border-box;
}
.textarea-container button {
position: absolute;
top: 0;
right: 0;
}
<div class="textarea-container">
<textarea name="foo">Some content here...</textarea>
<button>Menu</button>
</div>
I'll leave the styling for you to finalise as required.

Here's a version more or less as you asked, however, due to the fact that the container-div for the menu will have to be placed outside the textarea, there isn't really a way for it to dynamically fit to the textarea using only CSS - so for that you will have to use JavaScript.
* {
box-sizing: border-box;
}
#textareamenu_content ul,#textareamenu {
display: none;
}
#textarea_container {
position: relative;
display: inline-block;
}
#textarea_container label {
background: blue;
color: white;
padding: .2em;
position: absolute;
top: 0;
right: 0;
padding: .2em;
}
#textareamenu:checked ~ #textareamenu_content {
position: absolute;
top: 0;
right: 0;
overflow-y: scroll;
max-height: 15em;
min-height: 12em;
min-width: 10em;
border-left: 1.4em solid blue;
z-index: 99;
}
#textareamenu:checked ~ #textareamenu_content ul {
display: block;
}
textarea {
min-height: 15em;
min-width: 40em;
}
#textareamenu:checked ~ label {
position: absolute;
right: 8.6em;
top: 0;
width: 1.4em;
z-index: 100;
}
<div id="textarea_container">
<textarea name="text"></textarea>
<input type="checkbox" id="textareamenu">
<label for="textareamenu">{}</label>
<div id="textareamenu_content">
<ul>
<li>First_Name</li>
<li>Last_Name</li>
</ul>
</div>
</div>

Input type=file shows incorrect in IE8-9

I have a big project and many css styles. And I have input file type that shows incorrect in ie8 and ie9. I just see background-color and text "Browse...". So, when I exclude border from style using development tools in IE ... it shows correct. But I can't remove border using js or css. When I set default value: border: medium none #000 it doesn't work. Maybe it inherited style. How I can remove border-style from input-element.
Has anyone had this problem? I need default button for input-file control. How I can use js (jQuery) or css? IE has native style for elements?
HTML:
<input name="ImportFileInp$InputField" class="cs-fileinput" id="ImportFileInp_InputField" type="file"/>
CSS:
.cs-fileinput {
width: 71px;
margin-left:5px;
}
but in browser i see: border: 0px none currentColor

In accordance to our discussion, you should Customize your upload button.
The issue is not only in IE browser. Each browser has a different style (own style) for <input type="file" /> button.
Here is some example of how you can customize your upload button:
HTML code
<div class="custom-upload">
<input type="file">
<div class="fake-file">
<input disabled="disabled" >
</div>
</div>
CSS
.custom-upload {
position: relative;
height: 40px;
width: 350px;
margin:30px;
}
.custom-upload input[type=file] {
outline:none;
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
width:100%;
height:100%;
}
.custom-upload .fake-file {
background:url(http://www.fold3.com/i/upload-icon.png) center right no-repeat;
position: absolute;
top: 0px;
left: 0px;
width: 350px;
padding: 0;
margin: 0;
z-index: 1;
line-height: 100%;
}
.custom-upload .fake-file input {
font-size:16px;
height:40px;
width:300px;
}
JavaScript Code
$('.custom-upload input[type=file]').change(function(){
$(this).next().find('input').val($(this).val());
});
Thus, you can just change backgroung in .custom-upload .fake-file class to whatever image you want and it will have the same view in all browsers.

How to call a input file tag in javascript In safari Browser?

My JavaScript code:
$("#formimage").click(function(){
$("#avatar").click();
});
<input type="file" name="avatar" id="avatar" style="display: none;" onchange="this.form.submit()" />
in this it does not call avatar file tag... and not even giving any error ... in browser console

It's hard to trigger an input of type file by clicking on something else. The biggest issue that you will run into is that IE will see this as a security concern and might not let you do it (if the input is hidden). To get around this issue, you could "fade" the input behind the image, so that when the user clicks the image, they're actually clicking on the file input.
Your html could look something like this:
<div class="hiddenFileInputContainter">
<img class="fileDownload" src="/images/ico_upload.png">
<input type="file" name="fileUp" class="hidden" accept="image/*">
</div>
Then you would need to set the opacity of the input to zero, in order to let the image behind it be visible, without actually removing the input from the page:
input[type='file'].hidden
{
margin: 0;
padding: 0;
position: absolute;
top: 0;
right: 0;
height: 100%;
font-size: 50px;
cursor: pointer;
opacity: 0;
-moz-opacity: 0;
filter: Alpha(Opacity=0);
}
You would also need to set the dimensions for the image and the container:
img.fileDownload
{
height: 26px;
width: 26px;
padding: 0;
display: inline-block;
vertical-align: middle;
margin: 0 4px 0 0;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
}
div.hiddenFileInputContainter
{
position: relative;
display: inline-block;
width: 27px;
height: 27px;
overflow: hidden;
vertical-align: middle;
cursor: pointer;
}
Notice that the input's dimensions are meant to overflow, so that no matter where you click on the container, you will hit the input inside it. The input is meant to be as large as possible and the actual dimensions of the button are set on the container and the image.
Once you've managed to open the dialog, submitting the form would only be a matter of doing this:
$("#fileUploadField").on("change", function() {
$("#formId").submit();
});
or else try this to make the file input to look like button:
http://blueimp.github.io/jQuery-File-Upload/

Overlay css not working

i'm putting an overlay so that the elements on my page are disabled.
On my page there are two elements.
One is an anchor tag and another is a file upload input control.
File upload control is invisible by default and is triggered on clicking the anchor tag.
The problem is i have an overlay over these controls but its not working for the invisible file upload control.
During overlay if i click on the file upload area its triggered.Here is jsfiddle
Try clicking the PR text in jsfiddle, it shouldn't work due to overlay but is clickable
Here is the html code
<div class="ast">
<div class="notEdit-overlay"></div>
<a id="uploadQrCode" href="#" style="cursor:pointer;">Upload QR Code</a>
P<input id="qrCodeFileUpload" type="file" class="hideQRUpload" />R
</div>
Jquery code
$('#uploadQrCode').click(function(){
$('#qrCodeFileUpload').click();
});
And here is the css
.hideQRUpload
{
position:absolute;
opacity:0;
width:0px;
height:0px;
}
.notEdit-overlay
{
width: 1080px;
height: 99%;
left: 0px;
background: red;
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.ast{
position: relative;
}

Change css for .notEdit-overlay like this
.notEdit-overlay
{
width: 1080px;
height: 99%;
left: 0px;
background: none;
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
z-index: 1;
}
should use z-index.
http://jsfiddle.net/T5E8D/3/

Try adding pointer-events: none for your upload field – http://jsfiddle.net/T5E8D/2/

IE requires double click with custom button

I have a script that is dived as:
HTML:
<div id="wrapper">
<div id="container">
<div id="button">Click me!</div>
<form>
<input type="file" />
</form>
</div>
<div id="notice">File is uploaded!</div>
</div>
JavaScript(JQuery 2):
$(document).ready(function () {
$("input").on("change", function () {
$("div#notice").fadeIn();
//$("form").submit(); //If you want it to submit on your site uncomment this
});
});
CSS:
div#wrapper {
background-color: #ccc;
position: absolute;
width: 300px;
height: 200px;
}
div#wrapper > form > input {
color: rgba(0, 0, 0, 0);
zoom: 1;
filter: alpha(opacity=0);
opacity: 0;
color: rgba(0, 0, 0, 0);
}
div#container {
width: 200px;
height: 20px;
overflow: hidden;
}
div#button, input {
position: absolute;
top: 0px;
left: 0px;
cursor: pointer;
}
div#button {
z-index: 1;
background-color: #AAA;
}
input {
z-index: 2;
background-color: rgba(0, 0, 0, 0);
opacity: 0;
alpha: filter(opacity=0);
font-size: 25px;
color: rgba(0,0,0,0);
filter: alpha(opacity=0);
zoom: 1;
}
div#notice
{
background-color: green;
display: none;
position: absolute;
bottom: 0px;
left: 0px;
}
Note: This issue was there before blur was put to hide the flashing icon in IE.
In Chrome and Firefox the button only requires a single click. In IE 10 it requires a double click, which I don't want. I am trying to think of a way to make it single click.
The only thing I've tried so far is to .render("click") on the input, but that didn't work.
JSFiddle: http://jsfiddle.net/plowdawg/mk77W/

I had the same problem and found different approach. I just made that button be as big as I need with font-size on it. Then person simply can't click on text section.
<div class="divFileUpload">
<input class="fileUpload" type="file" />
</div>
and css:
.divFileUpload {
background-color: #F60;
border-radius: 5px;
height: 50px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
position: relative;
width: 50%
}
.fileUpload {
cursor: pointer;
font-size: 10000px; /* This is the main part. */
height: 100%;
opacity: 0;
position: absolute;
right: 0;
top: 0;
width: 100%
}

To follow up on what SDLion said....
This might be what you see
But really on top of that there is a file upload control that has been made transparent.
Clicking on the browse button brings up the file upload dialog with one click.
In IE You have to double click the text box to the left of it if you want to see the file upload dialog.
Increase the font size of the file input to fill the button image

While #bastos.sergio is right about it happening in the text section there is a way to get around this if you are comfortable using JavaScript.
You will need:
A wrapper div tag
An inner dev tag
Some sort of form input
JQuery (tested on 2.1)
Steps:
Create the "wrapper" div
Create an inner "button " div
Place the form element underneath the inner "button" div
Set the "wrapper" and "inner" divs to the same size
Set overflow:hidden on the wrapper
Create a JQuery script for the "inner" div setting the on click function
In the "inner" function click function call .click() on the input
Seems to work for me in IE 10.
$(document).ready(
function()
{
$("#open_dialog").on("click",function()
{
$("input").click();
});
$("input").on("change",function()
{
alert($("input"));
$("#notice").html("uploading");
});
});
#open_dialog
{
position: relative;
width: 200px;
height: 50px;
color: white;
font-family: "Arial";
font-size: 14pt;
text-align: center;
top: 25px;
margin-top: -.5em;
z-index: 1;
}
#wrapper
{
width: 200px;
height: 50px;
overflow: hidden;
cursor: pointer;
border-radius: 10px;
background: green;
z-index: 0;
}
input
{
margin-top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="open_dialog">Click Me</div>
<input type="file" />
</div>
<div id="notice">Nothing to upload</div>

The double click is happening on the text portion of the file upload, like #TravisPessetto stated.
Since it's not possible to hide/remove the text portion out of the file input control, I recommend that you put a regular button over the file input.
See here for more details.

I found another more simple solution, just trigger the event "click" on mousedown for this element only:
$("input").mousedown(function() {
$(this).trigger('click');
})
in order to avoid problems on other browsers, apply this solution to IE only:
if ($.browser.msie && parseInt($.browser.version, 10) > 8) {
$("#your_file_input").mousedown(function(event) {
if (event.which == 1) {
$(this).trigger('click');
}
})
}
here's your jfiddle modified, check it on IE 9-10:
http://jsfiddle.net/7Lq3k/
Edit: example modified in order to limit the event handling for left click only
(see: How to distinguish between left and right mouse click with jQuery for details)

I mixed various solutions to get this one that works for me (on every browser). It's written using LESS nesting.
HTML
<!--/* Upload input */-->
<div class="input-file">
Select image
<input type="file" />
</div>
LESS CSS
/*
* Input "file" type Styling
* Based on http://goo.gl/07sCBA
* and http://stackoverflow.com/a/21092148/1252920
*/
.input-file {
position: relative;
overflow: hidden;
margin: 10px;
input[type="file"] {
opacity: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
cursor: pointer;
width: 100%;
height: 100%;
font-size: 10000px;
}
// For Chrome
input[type=file]::-webkit-file-upload-button {
cursor: pointer;
}
}