I want to copy the input value when I click the div, but I can't get it to work. Here is my code:
function handleClick() {
input.select();
document.execCommand("copy");
}
#input {
display: none
}
<div click="handleClick()">
<input type="text" value="test" id="input">
</div>
When I remove the css style of display: none, it works.
Why can't I hide the input element? I just want to use input's .select(), but don't want input show in my page, how can I do this?
You can use opacity... instead of visibility (but the element will be there ocupping space...)
or you can use position: absolute + top: -100px for example.
function handleClick() {
var input = document.getElementById("input");
//var input = document.getElementById("input2"); //Use this class to test with other possibility
input.focus();
input.select();
var copy = document.execCommand("copy");
console.log("copied");
}
#input {
opacity: 0
}
/* Use this class to test with other possibility */
#input2{
position: absolute;
top: -100px;
}
#clicker{
width: 250px;
height: 75px;
border: 1px solid;
}
<div id='clicker' onclick="handleClick()">
<input type="text" value="test" id="input">
</div>
<br>
<input placeholder="Click DIV then PASTE here..."/>
Correct me if i'm wrong. your goal is to hide the input tag right?
Then why not use this?
<input type="hidden" id="custId" name="custId" value="3487">
then change the div to
<div onclick="handleClick()">
Related
I am disabling a input file button in JQuery which works
$('#ID').attr('disabled', true)
However, the button still looks enabled and doesn't show the disabled style (grey)
I have tried changing the CSS
// Example
$('#ID').css("background-color", 'yellow')
But regardless of what css I put the button never changes style.
What I can do?
the object I am using (HTML)
<input type="file" id="ID" class="" name="files[]" multiple />
Thanks
Sorry for previous answer.
I suggest you to check this link to know possibility about changing a input file style.
div.fileinputs {
position: relative;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
<div class="fileinputs">
<input type="file" class="file" disabled/>
<div class="fakefile">
<input disabled/>
<img src="http://fptp.uthm.edu.my/mba/images/911c660826c0b.png" style="width:30px;"/>
</div>
</div>
instead of true you can use disabled;
$("#ID").attr('disabled','disabled');
or you can use .prop()
$("#ID").prop('disabled', true);
$("#ID").prop('disabled', false);
Use prop instead attr:
$("#id").prop("disabled",true);
https://jsfiddle.net/8fvga3xk/8/
You can use the CSS selector :disabled
http://www.w3schools.com/cssref/sel_disabled.asp
.yourButtonClass:disabled{
background-color:#dddddd;
}
My requirement is that..I have a box. inside box I have a form..What I want is that..When I click the submit button ,inside the box the form will gone and a message will display.
Just like this:
I have the jefiddle :
jsfiddle
here ,When I click to the submit button,message is appearing on the top and the box1 is going down..
I'd much prefer using jQuery to do this, but here's the updated fiddle using only javascript, and keeping changes minimal.
<div id="box">
<div class="box2">
<h1 id="welcomeDiv" style="display:none;" class="answer_list" >welcome</h1>
<h1 id="details">Details</h1>
<form id="foo-form" method="POST" onsubmit="return showDiv();">
<input type="text" name="user" placeholder="Your name"/>
<input type="submit" name="create" class="enter submit" value="Enter"/>
</form>
</div>
</div>
... and the script ...
function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
document.getElementById('details').style.display = "none";
document.getElementById('foo-form').style.display = "none";
return false;
}
http://jsfiddle.net/0qyj62dv/7/
The form elements are now being hidden, the original details message is being hidden, and the welcome text is within the box now, not external to it. Oh, and I moved the function call to onsubmit of the form, so it returns false now and doesn't actually try to submit the form on jsfiddle.
Hth
Please try this
HTML: (Change type= submit to type=button)
<input type="button" name="create" class="enter submit" value="Enter" onclick="showDiv()" >
CSS: (Change type= submit to type=button)
.box2 input[type=button] {
width: 100%;
display: block;
margin-bottom: 10px;
position: relative;
}
.answer_list{
margin: 0px auto;
position: relative;
background:pink;
height:300px;
width:400px;
display: block;
border: dotted;
border-width: 1px;
text-align:center;
}
DEMO
Create a class with same styling as that of #box.
Let's say answer_box
.answer_box {
margin: 0px auto;
position: relative;
background: pink;
height: 300px;
width: 400px;
display: block;
border: dotted;
border-width: 1px;
}
Add answer_box class to welcome container.
<div id="welcomeDiv" style="display:none;" class="answer_box" ><h1> WELCOME<h1></div>
To align it from top, give little margin to <h1> inside welcome div.
You need to hide the box container when submit is clicked.
function showDiv() {
document.getElementById('box').style.display = "none";
document.getElementById('welcomeDiv').style.display = "block";
}
look at this example,
http://jsfiddle.net/0qyj62dv/8/
all you need to do is this
submit form using ajax.
Add the welcome tab and form tab inside same parent div
toggle tabs as you want using style.display property
<button type="button" name="create" class="enter submit" onclick="submitForm()">Enter</button>
function submitForm(){
document.getElementById('tab2').style.display = "block";
document.getElementById('tab1').style.display = "none";
$.ajax({
method: 'POST',
url : '',
data : $('#myForm').serialize(),
success : function(data){
console.log('success',data);
alert('success');
}
});
}
you may call this using jquery
I'm trying to use a custom < input type="file" > button. This works in chrome and FF. How do I make it work in IE 10 and above?
The problem in IE is that the browse box is not opening.
html:
<button type="button" id="fileT"><input type="file" id="file"></button>
css:
#fileT{
overflow: hidden;
position: relative;
}
#fileT input {
position: absolute;
opacity: 0.1
}
I've got what you mean: since <input type="file"/> is hard to style, you need a container.
Then try using a <div> instead of a <button>.
Just ensure you specify height and width since the div content will be absolutely positioned (and hence stripped from the flow).
Running demo:
<div id="fileT">
<input type="file" id="file" />
</div>
#fileT{
overflow: hidden;
position: relative;
width: 75px;
height: 50px;
}
#fileT input {
position: absolute;
opacity: 0.5;
}
I think this approach is wrong. The input field <input type="file"> should not include inside the <button>.
This will work.
<input type="file" id="file">
Just remove that button and try with just input tag.. It works..
Like this
<input type="file" id="file" value="Browse"/>
if you want to have your custom button then you have to remove position:absolute and keep opacity:0
You do not need to surround the input tags with button tags, as the input for file upload automatically creates a browse button for you. When you click it in IE you are just clicking the empty button and not the browse one created by the input which is why it is not doing anything.
So instead of:
<button type="button" id="fileT"><input type="file" id="file"></button>
Replace simply with:
<input type="file" id="fileT">
Try this way:-
<input type="file" id="file" multiple="true"/>
<button type="button" id="fileT">Upload</button>
OR
It might be version problem.
Updated1:-
This is bug from IE 10 Desktop.To be more specific here's the IE 10 Desktop version:
Version: 10.0.9200.16540
Update Versions: 10.0.4 (KB2817183)
Product ID: 00150-20000-00003-AA459
Refer This
Updated2:-
Html:
<div id="wrapper">
<div id="button">Upload</div>
<input type="file" id="file" multiple="true"/>
</div>
<div id="notice">Nothing to upload</div>
Css:
#button
{
width: 100px;
height: 50px;
background-color: #0f0;
}
#wrapper
{
width: 200px;
height: 50px;
overflow: hidden;
cursor: pointer;
}
Fiddler
var input = document.getElementById('Selectfile');
if (!input) {
input = document.createElement('input');
input.type = 'file';
input.id = "Selectfile";
document.body.appendChild(input);
}
input.onchange = function (e) {
var file = e.target.files[0];
};
input.click();
I show a search field on some text click, and hide it on search input blur.
But if I click on the search button I don’t want to hide the input field, and prevent it from being hidden (because of the blur). I tried to stopImmediatePropagation() without any luck.
Here’s some code:
// Not working. when search button is pressed, disable hiding the search input
$('.search-contacts-container > button').on('click touchstart', function(e) {
alert('xxx');
e.stopImmediatePropagation();
})
// when search input is blurred, hide it
$('#search-contacts').on('blur', function() {
$('.search-contacts-container').addClass('visuallyhidden');
$('#search-contacts').attr('required', 'false').blur();
})
// when search input is focused, show it
$('#search-contacts').on('focus', function() {
$('.search-contacts-container').removeClass('visuallyhidden');
$('#search-contacts').attr('required', 'true');
})
// on search text click, show the search input
$('.js-show-search').on('click touchstart', function() {
if ($('.search-contacts-container').is('.visuallyhidden')) {
$('.search-contacts-container').removeClass('visuallyhidden');
$('#search-contacts').attr('required', 'true').focus();
} else {
$('.search-contacts-container').addClass('visuallyhidden');
$('#search-contacts').attr('required', 'false').blur();
}
})
HTML:
<span class="js-show-search" title="Search for contacts">Search</span>
<form action="search" method="post" class="form-search search-contacts-container visuallyhidden">
<input type="text" id="search-contacts" placeholder="Search" required="false" />
<button type="submit" class="form-search__button" title="Search"></button>
</form>
Demo: http://jsfiddle.net/un775/
Any ideas?
Check out my new JsFiddle. I use this method on day to day tasks. I hope it helps you.
Basically what you are doing is adding a background that masks everything behind it, and then adding a click even listener to it that hides everything. The form/input is in front of the background allowing you to interact with it.
HTML
<div id="js-show-search">...</div>
<form id="search-contacts" class="hide">...</form>
<div id="background" class="hide"></div>
JavaScript
var searchContact, background;
searchContact = $('#search-contacts');
background = $('#background');
$('#js-show-search').on('click', function(){
//remove .hide to show elements
});
$('#background.close').on('click', function(){
//add .hide to hide elements
});
CSS
html, body {
height: 100%;
}
#background {
height: 100%;
width: 100%;
position: absolute;
top:0;
left: 0;
z-index: 0;
}
#search-contacts {
position: relative;
z-index: 1;
display: inline-block;
}
.hide {
display: none!important;
}
http://jsfiddle.net/un775/7/
I put an input button, and set its background with an image, now Ii want to change that image when the button is clicked.
Here is my relevant code:
<div id='back'>
<input type="button"/>
</div>
CSS code:
#back input{
width: 130px;
height: 130px;
background: url(img/back_default.png);
border: hidden;
}
Can it be done in CSS (as with links-<a> tags), or should I rely to JavaScript instead? Thanks.
Javascript is not needed:
#back input {
width: 130px;
height: 130px;
background: url(img/back_default.png);
border: hidden;
}
#back input:active {
background-image: url(img/back_default-active.png);
}
This should work with JavaScript:
function change() {
document.
getElementById("back").
getElementsByTagName("input").
style.backgroundImage = "url(img/anotherImage.png)"
}
Call it from your button click (or from anywhere you want):
<div id='back'>
<input type="button" onclick="change()"/>
</div>
It's as Matt Said you could use CSS's active pseudo class to change the background or alternatively you could use javascript to add an eventHandler (onClick Listner )to the button that changes the image.
HTML
<div id='back'>
<input type="button" id="xyz" value="Go to back" class="button"/>
</div>
JS
<script>
el = document.getElementById('xyz');
el.addEvenListener("click",changeImg,false);
function changeImg()
{
el = document.getElementById('xyz');
el.style.backround="url('img/back_default-active.png')";
}
</script>