I was working on a project that I need a hidden input field to take user input.
I have javascript in place to focus always on the input field. When the div is visible I can see typing. When I hide the div type and make the div visible again I do not see any change. How can I make it so when the div is hidden, it will still take user input? Really, if there is another way besides hiding, that would be great.
<html>
<body>
<div id="diva">
<input name="geta" id="geta" type="text" onkeypress="javascript:geta.focus();" onKeyUp="javascript:geta.focus();" OnBlur="javascript:geta.focus();" OnChange="javascript:geta.focus();" />
</div>
<button onClick="javascript:change();">Show/Hide Div</button>
<script language="javascript" type="text/javascript">
<!--
function change() {
var div = document.getElementById('diva');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};
geta.focus();
// -->
</script>
</body>
</html>
Fixed copy using Jeffman's idea:
<html>
<head>
<style>
input {
position: absolute;
left: -999em;
}
</style>
</head>
<body>
<input name="geta" id="geta" type="text" onkeypress="javascript:geta.focus();" onKeyUp="javascript:geta.focus();" OnBlur="javascript:geta.focus();" OnChange="javascript:geta.focus();" />
<button onClick="javascript:show();">Show</button><button onClick="javascript:hide();">Hide</button>
<script language="javascript" type="text/javascript">
<!--
function hide() {
document.getElementById('geta').style.position = 'absolute';
document.getElementById('geta').style.left = '-999em';
}
function show() {
document.getElementById('geta').style.position = 'absolute';
document.getElementById('geta').style.left = '10em';
}
geta.focus();
// -->
</script>
</body>
</html>
Are you just trying to make it so any user input is captured to a hidden input field?
If so you can add a onkeyup trigger to the document, and for every keyup, modify the hidden input field.
Otherwise, once you have hidden an element it would loses focus.
Simple example:
I don't know if you are using jQuery, so here is a very native, simple solution, put in your head tag
document.onkeyup = function(e) {
var input = document.getElementById('myinput');
if (input.style.display == 'none') {
input.value += String.fromCharCode(e.keyCode || e.which);
}
};
I don't think it's possible to type in a text field when it's hidden. What is your use case?
Related
I'm using javascript to show a hidden div by clicking a button. After the div is displayed, I want to be able to click the button again and hide the div, and so on...
Here is my javascript:
<script type="text/javascript">
function showDiv() {
document.getElementById('dropdownText').style.display = "block";
}
</script>
This is the button:
<input type="button" name="answer" value="+" onclick="showDiv()" />
This is the hidden div:
<div id="dropdownText" style="display:none;">
This is the dropdown text.
</div>
You can e.g. bind specified class to the element and just toggle it.
function showDiv() {
document.getElementById('dropdownText').classList.toggle("hidden");
}
.hidden {
display: none;
}
<input type="button" name="answer" value="+" onclick="showDiv()" />
This is the hidden div:
<div id="dropdownText" class='hidden'>
This is the dropdown text.
</div>
If you tagged this question with jQuery as well, so I guess you could use the .toggle function, like this -
$('#answer').click(function() {
$('#dropdownText').toggle();
}
If you want to stick up with javascript only, your showDiv() function should look like this -
function showDiv() {
let text = document.getElementById('dropdownText');
if (text.style.display === 'none') {
text.style.display = 'block';
}
else {
text.style.display = 'none';
}
}
You should capture the current style every time a button is clicked, since you want to 'toggle' it back to the opposite state.
You simply need to do this:
const drop = document.getElementById('dropdownText')
const toggleDropdown = _ => {
const cl = drop.classList
cl.contains('hide')?cl.remove('hide'):cl.add('hide')
}
#dropdownText.hide {display:none}
/* DropDown Styles for this demo */
#dropdownText {width: 10em; height: 4em; background: green}
<button onclick='toggleDropdown()'>Toggle Div</button>
<div id='dropdownText'></div>
Note: Click Run Code Snippet to see the code in action.
The way it works is by detecting if it has the hide class and based on that, toggle that class.
The actual hiding and showing is done via CSS!
<div id="dropdownText" style="display:none">
This is the dropdown text.
</div>
<script type="text/javascript">
function showDiv() {
var x = document.getElementById('dropdownText');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
when I run this the "You entered: insert text here" appears for a second and then disappears and the text box clears on its own. I spent 3 hours and I can't see where I'm making my mistake. Any help is appreciated! Thanks.
<!DOCTYPE html>
<html>
<head>
<title> Basic JavaScript </title>
<script type = "text/javascript">
function Copier() {
var firstWord= document.getElementById("Word1").value;
document.write("You entered: " + firstWord);
}
</script>
</head>
<body>
<form>
Word Number 1:
<input type = "text" id = "Word1" >
<br>
<button onclick = "Copier()">Copy Text Box 1</button>
</form>
</body>
</html>
Don't use document.write() as it is dangerous. Create a separate element with its own id and use innerHTML:
function Copier() {
document.getElementById("output").innerHTML = "You entered: " + document.getElementById("Word1").value;
}
<form>
Word Number 1:
<input type = "text" id = "Word1" >
<br>
<button onclick = "Copier()">Copy Text Box 1</button>
<p id="output"></p>
</form>
You don't need the form tag.
In case you are using a form tag around your input, the browser assumes that there should be a method defined like:
<form action="post/get" url="some-file.php">
As soon as your JavaScript has grabbed the input, it get's flushed out by the form (re)action, which is pointing to no file specified.
Just leave the form tag and grab the value by the input field itself.
<!DOCTYPE html>
<html>
<head>
<title> Basic JavaScript </title>
<style>
input[type="text"] {
border: 1px solid #565656;
padding: 2px;
color: black;
}
#display {
position: relative;
top: 0;
width: 300px;
height: 30px;
}
</style>
<script type = "text/javascript">
function Copier() {
var firstWord= document.getElementById("Word1").value;
var box = document.getElementById('display');
box.innerHTML = "You entered:" + firstWord;
}
</script>
</head>
<body>
Word Number 1:
<input type="text" id="Word1" >
<br>
<button onclick = "Copier()">Copy Text Box 1</button>
<div id="display"></div>
</body>
</html>
Using what user 'user2521387' said about the form tag. You should drop the form tag, and if you don't want to use innerHTML you could do something like this:
function Copier() {
var firstWord = document.getElementById("Word1").value;
var box = document.getElementById('display');
//clear all childs of div with id 'display'
while (box.firstChild) { // whilte first child is valid
box.removeChild(box.firstChild); // removes first child
}
var p = document.createElement("p"); //create p tag
p.appendChild(document.createTextNode("You entered:" + firstWord));
box.appendChild(p); //add p tag to div
}
I am looking for javascript command that would do the following:
Click on image -> open spoiler
Click on image again -> hide spoiler
Here is what I got so far:
javascript in my html
<script>
function myFunction() {
document.getElementById("prvy").innerHTML = document.getElementById('spoiler_id').style.display='';}
</script>
Spoiler
<a id="show_id"
onclick="document.getElementById('spoiler_id').style.display=''; document.getElementById('show_id').style.display='none';"
class="link"></a><span id="spoiler_id"
style="display: none">[Show]<button onclick="document.getElementById('spoiler_id').style.display='none';
document.getElementById('show_id').style.display='';"
class="link">[Hide]</button>
<br><h1 id="bz">Heading</h1><br><br><p>text</p></span>
And my button:
<div id="prvy" onclick="myFunction()"></div>
What I managed to do, is to click on a image, wich will open spoiler. Hovewer, I've been unable to do the second part, onclick again it will close the spoiler.
I also did serach for solution alredy, nothing worked for me, not even this: Link
I also tired if{} else{} statement but didn't work for me either.
Help would be really appreciated, as I am getting desperate on this one.
You can use jQuery .toggle() to toggle show/hide
$("#prvy").click(function() {
$("#spoiler_id").toggle();
});
Note : You need to include jQuery in your document as
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Working snippet :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="show_id"
onclick="document.getElementById('spoiler_id').style.display=''; document.getElementById('show_id').style.display='none';"
class="link"></a><span id="spoiler_id"
style="display: none">[Show]<button onclick="document.getElementById('spoiler_id').style.display='none';
document.getElementById('show_id').style.display='';"
class="link">[Hide]</button>
<br><h1 id="bz">Heading</h1><br><br><p>text</p></span>
<div id="prvy" onclick="myFunction()">button</div>
<script>
$("#prvy").click(function() {
$("#spoiler_id").toggle();
});
</script>
In the JavaScript where you click the button use the simple jQuery function toggle.
$('#spoiler_id').toggle();
Toggle will hide the element selected if it is currently shown or display the element if it is currently hidden.
you would need some state that flips when the function is called.
like this.
<script>
var state = false;
function myFunction() {
state = !state;
if(state){
//do something
}else{
//do something else
}
}
</script>
Is that all of your code, it would be easier for you and less confusing too if you just gave the buttons an on click function and then called that function in your js.
Can I see all of your html
I am giving an example to concerned question using javascript.
HTML:
<script type="text/javascript">
var permit = 'true';
function showhide() {
var getcont = document.getElementsByClassName('hidshowcont');
if (permit === 'true') {
permit = 'false';
getcont[0].style.display = 'block';
}
else {
permit = 'true';
getcont[0].style.display = 'none';
}
}
</script>
<style type="text/css">
.hidshowcont{
height: 200px;
width: 300px;
border: 1px solid #333333;
display: none;
}
</style>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1cSDTn18ufwjuMihttTvCPJOnFY-4hxbPcaOVd87nSPaQakbP9IERaQ" />
<br />
<br />
<div class="hidshowcont">
This is an example of hide and show the container by clicking of an image.
</div>
This will help u much
I need your help,
How can I go about copying text (with the line breaks included) from my table and put it back into the textarea “newtext”
My existing coding doesn't seem to be working.
<html>
<head>
<style type="text/css">
.box { width: 400px; height: 50px; }
</style>
<script type="text/javascript">
function ta() {
taValue = document.getElementById("ta").value
taValue = taValue.replace(/\n/g, '<br/>')
document.getElementById("tatext").innerHTML = taValue
}
function text2area() {
document.getElementById("newtext").innerHTML = document.getElementById("tatext").innerHTML
}
</script>
</head>
<textarea class="box" id="ta" onkeyup="ta()"></textarea>
<table id="tatable"><tr><td><div id="tatext"></div></td></tr></table>
<br>
<input type="button" onclick="text2area()" value="move text">
<br><br>
<textarea class="box" id="newtext"></textarea>
</html>
Instead of using the function innerHTML, grab the value of the text area you want to capture, and set the value of the new text area to this. You are already using value for the variable taValue. Also, it's better practice to use addEventListener for your clicks and keyups.
function ta() {
taValue = document.getElementById("ta").value
taValue = taValue.replace(/\n/g, '<br/>')
document.getElementById("tatext").value = taValue;
}
function text2area() {
taValue = document.getElementById("ta").value;
document.getElementById("newtext").value = taValue;
}
document.getElementById("ta").addEventListener ("onkeyup", ta, false);
document.getElementById("move-text").addEventListener ("click", text2area, false);
JSFiddle: http://jsfiddle.net/tMJ84/1/
textarea does not have an innerHTML. Notice how you grabbed the value? Set it the same way! It is like this because it is a form element.
document.getElementById("tatext").value = taValue; //semi-colons are just good practice
and here:
document.getElementById("newtext").value = document.getElementById("tatext").value;
i am a beginer to javascript.I want to show a hidden textbox on a button click.i do the bellow code, but it doesnt work.
What is the problem with my code?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function display() {
var z = prompt("enter your name...");
if(z != null) {
document.getElementById("demo").innerHTML = "thankyou " + z + "..";
document.getElementById("case").style.visibility = 'visible';
} else {
document.getElementById("demo").innerHTML = "thankyou";
}
}
</script>
<title></title>
</head>
<body>
<p id="demo">
click on the button.....
</p><button type="button" onclick="display()">submit</button>
<form>
<input type="text" id="case" name="myText" style="display:none">
</form>
</body>
</html>
replace
document.getElementById("case").style.visibility='visible';
with
document.getElementById("case").style.display='block';
Change the style as display block instead of visibility,
document.getElementById("case").style.display='block';
or have your text box as visibility hidden instead of display:none
<input type="text" name=<name> style="visibility:hidden"/>
The following two statements will display the element with id "case":
document.getElementById("case").style.display='block';
or
document.getElementById("case").style.display='';
The following statement will hide the element with id "case":
document.getElementById("case").style.display='none';
Display:none works fine with HTML to hide a button