input inside absolute div is not responding - javascript

I have absolutely positioned an input inside a div element, but the input is unresponsive :
<div style="position: absolute; z-index: 2; height: 48px;">
<input id="myinput">
</div>
To test I tried:
$("#myinput").click(function(){
$(this).focus().select();
});
This gives the input focus, but the value still won't change!

If you are not getting any js errors and all the files are loaded, try this:
$("#myinput").on('click', function () {
// if you are clicking on it, you do not need to focus()
$(this).select();
})

here you go:
http://jsfiddle.net/FY2CF/
<div style="position: absolute; z-index: 2; height: 48px;">
<input id="myinput" type="text" />
</div>
$("#myinput").click(function(e){
this.select();
});

Related

Place a text inside the middle of an input

Having an input form:
.upload-image input {
height: 100% !important;
width: 100% !important;
}
.upload-image-container {
background-color: #f5f7fa;
height: 192px;
width: 320px;
}
.upload-logo-label {
font-family: Open Sans;
top: 0;
color: #afafaf;
z-index: 1;
}
<div className="upload-image upload-image-container">
<label
htmlFor="files"
className="upload-logo-label btn"
id="image-input">
Drag & drop logo here
<input
name="image"
id="image-input"
accept="image/*"
onChange={console.log('upload image')}
multiple
type="file"
className="imgInp"
/>
</label>
</div>
The problem is that the div creates first the label on top and under it the input. What I want is to place the label (or not mandatory that label but anything that can contain text) in the middle of input.
This is how it looks now:
This is how I want to make it look (ignore the icon for the moment):
Also, only the input is clickable at the moment, the label text isn't and it should be.
Is there a way to do this?
I actually didnt try it, but something very similar worked, when I made custom checkboxes for one customer. I would go for something like this...
<input name="image"
id="image-input"
accept="image/*"
onChange={console.log('upload image')}
multiple
type="file"
class="imgInp"
style="display:none" />
<div id="img-div" class="upload-image upload-image-container">
<label htmlFor="files"
class="upload-logo-label btn"
id="image-input">
Drag & drop logo here
</label>
</div>
<script type="text/javascript">
$("#img-div").on("drop", function (event) {
$("#image-input").trigger("drop", event);
});
$("#img-div").on("click", function (event) {
$("#image-input").trigger("click", event);
});
</script>

How Can I Copy Text From Hidden Textarea to Clipboard?

I have a hidden text area like this with some values set:
<textarea style="display: none;" id="element_html"></textarea>
On click of a button, I try to copy its content to clipboard using this JS code:
$('#element_html').select();
document.execCommand('copy');
It works only if the text area is visible. How can I copy the hidden text area content to clipboard?
opacity: .01;
does the job. You should combine it with:
height:0;
position:absolute;
z-index: -1;
Do not use pointer-events:none; as it will stop .select() from working, as well.
function copyContents() {
$('#element_html').select();
document.execCommand('copy');
}
#element_html {
position: absolute;
opacity: .01;
height: 0;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="element_html">Which textarea?</textarea>
<button onclick="copyContents()">Copy</button>
<input type="text" placeholder="Paste it here...">
You can create a temporary input element that is appended to the body, set it its value to the textarea's content and then use it for the copy function. Then you remove it from the dom. This will work - irrespective of the display state of the text area.
Note that I did not create this method - I got it from somewhere (possibly another SO answer) and have used it since in a number of instances.
function copyContents() {
var $temp = $("<input>");
var content = $('#element_html').text();
$("body").append($temp);
$temp.val(content).select();
document.execCommand("copy");
$temp.remove();
}
#element_html {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="element_html">Hidden textarea content</textarea>
<button onclick="copyContents()">Click to copy</button>
<input type="text" placeholder="Paste here">
The problem is that since the textarea has its display property set to none, its content can not be selected. You can absolutely position the textarea to the left with position: absolute and left: -9999px. You should also add z-index: -9999 so it will always be placed under other elements (unless they have a lower z-index).
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea style="position: absolute; left: -9999px;" id="element_html">Text inside textarea</textarea>
<button onClick="copy()">
Copy
</button>
<p/>
<textarea placeholder="Paste text here..."></textarea>
<script>
function copy(){
$('#element_html').select();
document.execCommand('copy');
}
</script>
The Following codes worked for my problem. paste the js code inside your script tag/file.also add the css style to hide the textarea. Also, I found the following ideas through stackoverflow forum so all credit to those folks.
HTML code:
function cpy(n)
{
var id=n;
var txt=document.getElementById(id);
txt.select();
document.execCommand("copy");
};
/* The Following Code is to Hide textarea from The user view area */
textarea{
opacity: 0;
position: absolute;
z-index: -9999;
pointer-events: none;
}
<!-- readonly attribute is used because i found that in mobile devices, keyboard poped-up while i clicked the button to copy text-->
<textarea id="c1" readonly>
This is a text from textarea One.
</textarea><br>
<!--The cpy(this.id) passes button id to js function-->
<button id="c1" onclick="cpy(this.id)">Copy</button>
<input type=text placeholder="Paste Here to test">

how to disable click outside a particular div

Here is the sample code. I want to disable the click outside the search id. Just like we need in pop-up to disable outside click
<body>
You can search here
<div id="search">
Search
<input type="text" name=search><button>search</button>
</div>
</body>
You can create a div with fixed position that spans the entire screen and place what you want to be able to click inside of it, making all the clicks outside that element actually be on that "empty" div.
.disable-outside-clicks {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10000;
}
.enabled-clicks {
width: 200px;
margin: 0 auto;
}
<div>
<button>This button will not work</button>
</div>
<div class="disable-outside-clicks">
<div class="enabled-clicks">
<button>This button will work</button>
</div>
</div>
You can use the :not() CSS selector combined with the .preventDefault() JS function :
$('*:not(#search)').click(function(e){
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I don't work !
<div id="search"></div>
maybe the css property pointer-events is the thing you are looking for.
add a class to the body element if the pop up is opened. let's say you will add the class .popup to the body element if the pop up is visible. then you can do it like this in css:
body.popup *:not(#search) {
pointer-events: none;
}
this means, that every element (*) in the body element with the class .popup, except the element #search is not clickable.

Open browser-standard colorpicker with javascript without type=color

Does anyone knows a javascript only way to open the browser-standard colorpicker, without using a html field? so i want a javascript what does exactly the same a a click on the html input color field.
Bart
You are going to have to use the input field, you can just hide it off the page. Issue here is the fact that the color dialog requires a click in browsers in order to open up the color dialog. It will not work if you just call click()
document.getElementById("xxx").addEventListener("click", function() {
document.getElementById("c").focus();
document.getElementById("c").value = "#FFCC00";
document.getElementById("c").click();
});
.hidden {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
<input type="color" id="c" tabindex=-1 class="hidden">
<input type="button" id="xxx" value="Click Me!">
Here's a good old "hover-hack" solution that works even in MS Edge:
<input type="color" style='opacity:0;width:100px;position:absolute;'/>
<button>clickme</button>
then bind onchange to the colro element
https://jsfiddle.net/Lnzm0sry/2/

repositioning text boxes in CSS

Good morning everyone,
Sorry not sure how to word the question.
I have came across this problem, I can't seem to make the 'your email' box and 'your password' box align together. When you preview it in full screen, it will be how I want it but when I shrink the screen they start to go weird. Like this:
I want it like this but on a big screen
This is what happens on a big screen
I would like it so they are both under each other and both in the same place. Please could you help me?
Please visit http://jsfiddle.net/xiiJaMiiE/8S5VG/ to see my code so far.
#top_box
{
background: grey;
height: 50px;
left: 80.8%;
width:20%;
position: relative;
top: 0;
z-index: 5;
}
There were some errors in your HTML like unnecessary spacing and invalid tag names. I made it good. Replace your html with the following HTML code:
<body>
<div id="wrapper">
<div id="top_box">
<div class="homeform">
<input type="email" placeholder="Your E-Mail">
<input type="password" placeholder="Your Password">
<input type="Submit" value="Login">
</div>
</div>
<div class="background"></div>
<div id="menu_box"></div>
<div id="main_box"></div>
<div id="Bottom_box"></div>
</div>
</body>
And also remove height from #top_box.
Working Fiddle
add line break between the two input boxes
<input ... />
<br />
<input .../>
http://jsfiddle.net/8S5VG/1/
or make the inputs to display:block
[you had a slight mistake in the css]
http://jsfiddle.net/8S5VG/2/#update
you calling homeform as an ID is you css but in your html it is a class replace the # with a . before homeform
you also have extra spacings that are moving the boxes, clean your html get rid of all unnecessary spaces
.homeform
{
position:relative;
height:20px;
width:auto;
}
Tyr This
#top_box {
background: grey;
min-height: 50px;
min-width: 164px;
left: 80.8%;
width: 20%;
position: relative;
top: 0;
z-index: 5;
}
Give in enough space for the inputs to be in place.
Hope this helps. if you need further assistance just let me know.

Categories