Set focus to one thing when clicking on another? - javascript

This is probably very simple to do in Javascript, but I don't know how to.
Example:
<input type="textbox" id="txt">
<input type="button" id="btn">
Say I want to click on btn and have it set focus on txt, how would I go about doing that? Thank you!

Javascript & HTML code:
var btn = document.getElementById('btn');
var text = document.getElementById('txt');
btn.addEventListener('click', function() {
text.focus();
});
<input type="textbox" id="txt">
<input type="button" id="btn" value="click me">
This is the only thing you have to do.

Use the element.focus() method.
var btn = document.getElementById('btn');
var txt = document.getElementById('txt');
btn.addEventListener('click', function() {
txt.focus();
});

You could try
OnClick="document.getElementById('txt').focus();

Consider doing the same thing with jQuery. Cleaner and easier.
$("#btn").click(function(){
event.preventDefault();
$("#txt").focus();
});
event.preventDefault(); will stop the form button from submitting to wherever it would normally go. Might not be necessary?
Downside of doing it this way is that you must include jQuery.

Related

JavaScript generated code and screen readers

I'm asking you to help me out, I'm totally stuck with this problem.
I want to make possible my code to be navigated through keyboard and adoptable to screen reader devices. But I have several issues.
This is my code in JS:
function changeText()
{
document.getElementById('div1').innerHTML = '<input id="btn2" type="button" onclick="changeText2()" value="Change Text2" />';
document.getElementById('btn1').setAttribute("aria-hidden",true);
document.getElementById('div1').focus();
}
function changeText2()
{
document.getElementById('div1').innerHTML = '<input id="btn3" type="button" onclick="changeText()" value="Change Text" />';
document.getElementById('btn1').setAttribute("aria-hidden",true);
}
and HTML:
<div id="div1">
<input id="btn1" type='button' onclick='changeText()' value='Change Text'/>
</div>
when I navigate to btn1 in windows with keyboard only(with tab) and then press enter(or space) the button is changed, but it lose focus. As you may see, I tried to focus it with JS, but without a result. I also tried to use tabindex tag, but didn't help too. I want it to be focused when it is pressed, so it will be easier to navigate and to be accessible for screen readers.
Please help!
EDIT
Focus has been tested on the button with James Long solution and it works!
However, the btn.setAttribute('aria-hidden', true); should be removed.
Final EDIT
I just got it, lol! In order to MY example to work properly, I have should be focus to btn2 instead of btn1. This is so silly! So, it goes as follows:
function changeText()
{
document.getElementById('div1').innerHTML = '<input id="btn2" type="button" onclick="changeText2()" value="Change Text2" />';
document.getElementById('btn2').focus();
}
function changeText2()
{
document.getElementById('div1').innerHTML = '<input id="btn1" type="button" onclick="changeText()" value="Change Text" />';
document.getElementById('btn1').focus();
}
I feel proud of my self :)
I don't have a screen reader to hand so it's tricky to test this, but you might have better luck changing a button rather than replacing it and focussing on the button itself.
<div id="div1">
<button type="button" id="btn1">Change Text</button>
</div>
And then your JS:
document.addEventListener('DOMContentLoaded', function () {
function changeText(btn) {
btn.textContent = btn.textContent === 'Change Text'
? 'Change Text2'
: 'Change Text';
btn.setAttribute('aria-hidden', true);
btn.focus();
}
document.getElementById('btn1').addEventListener('click', function (e) {
changeText(e.target);
}, false);
}, false);
Put the focus on your button :
$("#btn1").focus();
In pure JS :
document.getElementById('btn1').focus();

Input text value into a div?

Say I have this text box:
<input type="text" id="myText" placeholder="Enter Name Here">
Upon pressing a button, I would like to send the value entered into this div:
<div id="text2"></div>
I'm not entirely sure how to do this. Do I create a function and call it to the div? How would I do that?
Could someone clear this up for me? Thanks.
Add an onclick to your button:
<input type="button" id="somebutton" onclick="addText()">
Then write the javascript:
function addText()
{
document.getElementById('text2').innerHTML = document.getElementById('myText').value;
}
Solution using onclick event:
<input type="text" id="myText" placeholder="Enter Name Here">
<div id="text2"></div>
<button id="copyName" onclick="document.querySelector('#text2').innerHTML = document.querySelector('#myText').value" value="Copy Name"></button>
JSFiddle: http://jsfiddle.net/3kjqfh6x/1/
You can manipulate the content inside the div from javascript code. Your button should trigger a function (using the onclick event), which would access the specific div within the DOM (using the getElementById function) and change its contents.
Basically, you'd want to do the following:
<!DOCTYPE html>
<html>
<script>
function changeContent() {
document.getElementById("myDiv").innerHTML = "Hi there!";
}
</script>
<body>
<div id="myDiv"></div>
<button type="button" onclick="changeContent()">click me</button>
</body>
</html>
Mark D,
You need to include javascript to handle the button click, and in the function that the button calls, you should send the value into the div. You can call $("#myText").val() to get the text of the text box, and $("#txtDiv").text(txtToAppend) to append it to the div. Please look at the following code snippet for an example.
function submitTxt() {
$("#txtDiv").text($("#myText").val())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="myText" placeholder="Enter Name Here">
<button onclick = "submitTxt()"> Submit </button>
<div id="txtDiv"> </div>
HTML could be:
<input type='text' id='myText' placeholder='Enter Name Here' />
<input type='button' id='btn' value='click here' />
<div id='text2'></div>
JavaScript should be external:
//<![CDATA[
var pre = onload; // previous onload? - window can only have one onload property using this style of Event delegation
onload = function(){
if(pre)pre();
var doc = document, bod = doc.body;
function E(e){
return doc.getElementById(e);
}
var text2 = E('text2'); // example of Element stored in variable
E('btn').onclick = function(){
text2.innerHTML = E('myText').value;
}
}
//]]>
I would recommend using a library like jQuery to do this. It would simplify the event handling and dom manipulation. None the less, I will include vanilla JS and jQuery examples.
Assuming the HTML in the body looks like this:
<form>
<input id="myText" type="text" placeholder="Enter Name Here">
<br>
<input type="submit" id="myButton">
</form>
<div id="text2"></div>
The Vanilla JS example:
//Get reference to button
var myButton = document.getElementById('myButton');
//listen for click event and handle click with callback
myButton.addEventListener('click', function(e){
e.preventDefault(); //stop page request
//grab div and input reference
var myText = document.getElementById("myText");
var myDiv = document.getElementById("text2");
//set div with input text
myDiv.innerHTML = myText.value;
});
When possible avoid using inline onclick property, this can make your code more manageable in the long run.
This is the jQuery Version:
//Handles button click
$('#myButton').click(function(e){
e.preventDefault(); //stop page request
var myText = $('#myText').val(); //gets input value
$('#text2').html(myText); //sets div to input value
});
The jQuery example assumes that you have/are adding the library in a script tag.

Switch to different button on click

I want code to switch the buttons. If I pressed button1 first time, it must show button2 and vice versa.
<input type="submit" value="asc" name="button1" id="but1">
<input type="submit" value="desc" name="button2" id="but3">
One solution without the need for JQuery would be this one:
<input type="button" value="asc" name="button1" id="but1" onClick="document.getElementById('but3').style.display='';this.style.display='none';">
<input type="button" value="desc" name="button2" id="but3" style="display:none;" onClick="document.getElementById('but1').style.display='';this.style.display='none';">
You can also do it this way if you want to use the visibility:
<input type="button" value="asc" name="button1" id="but1" onClick="document.getElementById('but3').style.visibility='visible';this.style.visibility='hidden';">
<input type="button" value="desc" name="button2" id="but3" style="visibility:hidden;" onClick="document.getElementById('but1').style.visibility='visible';this.style.visibility='hidden';">
Using visibility preserves the buttons position. I changed the type from submit to button just out of demonstration reasons.
You can look at both JSFIDDLE demos of these solutions here and here.
Not sure what you're trying to achieve, but you can use:
$('input[type="submit"]').click(function() {
$(this).hide().siblings('input[type="submit"]').show();
});
Fiddle Demo
Simply Use .toggle() in jQuery
$('input[type="submit"]').click(function() {
$('input[type="submit"]').toggle();
});
Fiddle
I'm betting your .toggle-radio-switch elements are siblings. Remove .parent() from your code. It isn't needed since .radio-switch-slider is contained directly in .toggle-radio-switch
$(this).find('.radio-switch-slider')
document.getElementById('but1').addEventListener('click', function() {
document.getElementById('but1').style.visibility = 'hidden';
document.getElementById('but3').style.visibility = 'visible'; }, false);
document.getElementById('but3').addEventListener('click', function() {
document.getElementById('but3').style.visibility = 'hidden';
document.getElementById('but1').style.visibility = 'visible'; }, false);
If you want to hide button and its placeholder completely, use style.display = 'none' and style.display = 'block'. If you put both buttons in div container with default static positioning, then both buttons will appear at the same position in container.
By default when page will load put following code so that your second button will be hide.
$(document).ready(function(e){
$('#but3').hide();
});
After that Put code that were
$('input[type="submit"]').click(function() {
$(this).hide().siblings('input[type="submit"]').show();
});
Try using the following functions:
$(element)click(callback) will handle the click of the element
$(element).show() will show the element
$(element).hide() will hide the element
so a semple code is:
//first hidden the second button
$('#but3').css('display','none')
// handle click of first button
$('#but1').click(function(){
$(this).hide()
$('#but3').show()
});
// handle click of second button
$('#but3').click(function(){
$(this).hide()
$('#but1').show()
});
Here is an example: http://jsfiddle.net/L7zux/1/
You can try the code below:
$('input[type="submit"]').click(function(){
var valueOfButton = $(this).val();
if(valueOfButton == 'asc')
{
$('input[value="asc"]').show();
$('input[value="desc"]').hide();
}
else
{
$('input[value="desc"]').show();
$('input[value="asc"]').hide();
}
});

how to read input from text input field and put input into div

I am trying to run this code.
the code should take a string as input and put that input to a div and calculate the width of the div.
here is code i have used.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<input type="text" value="" name="input">
<input type="submit" value="submit" name="submit">
<script>
var elem = '<div id="divitem" style="width:auto;"></div>';
$('body').append($(elem));
$("submit").click(function () {
var text = $(this).text();
value= $("input").val(text);
alert(value);
});
</script>
</body>
</html>
but i am not getting any output. how to do this?
please help me.
Try this paps!
Demo
This is similar to your problem.
HTML
<div id="container">
<input type="text" value="" id="inputtext">
<input type="button" value="submit" id="submit">
</div>
Script
$(function(){
var elem = '<span id="divitem"></span>';
$('#container').append($(elem));
$("#submit").click(function () {
$('#divitem').html($('#inputtext').val());
alert($('#divitem').width());
});
});
Here's a fiddle
To obtain value from a text field you need to use this,
$('input[name="input"]').val();
and not .text()
To answer your second question, you need to use this
$('#divitem').attr('style');
or
$('#divitem').attr('width');
The problem is here:
$("submit").click(function () {
var text = $(this).text();
value= $("input").val(text);
alert(value);
});
$(this) refers to the element that you select, which is the submit button.
You should replace the first line of the function with
$('input[name="input"]').text();
Finally, setting the html content of the div, will be done this way:
elem.html(test);
Hope this helps. Have a great day.
I have created a jsFiddle for your question http://jsfiddle.net/N4zFZ/ in JavaScript
You can calculate width by
`var width = $('#divId').attr('width');`

Add a string of text into an input field when user clicks a button

Basically just trying to add text to an input field that already contains a value.. the trigger being a button..
Before we click button, form field would look like.. (user inputted some data)
[This is some text]
(Button)
After clicking button, field would look like.. (we add after clicking to the current value)
[This is some text after clicking]
(Button)
Trying to accomplish using javascript only..
Example for you to work from
HTML:
<input type="text" value="This is some text" id="text" style="width: 150px;" />
<br />
<input type="button" value="Click Me" id="button" />​
jQuery:
<script type="text/javascript">
$(function () {
$('#button').on('click', function () {
var text = $('#text');
text.val(text.val() + ' after clicking');
});
});
<script>
Javascript
<script type="text/javascript">
document.getElementById("button").addEventListener('click', function () {
var text = document.getElementById('text');
text.value += ' after clicking';
});
</script>
Working jQuery example: http://jsfiddle.net/geMtZ/
​
this will do it with just javascript - you can also put the function in a .js file and call it with onclick
//button
<div onclick="
document.forms['name_of_the_form']['name_of_the_input'].value += 'text you want to add to it'"
>button</div>
Here it is:
http://jsfiddle.net/tQyvp/
Here's the code if you don't like going to jsfiddle:
html
<input id="myinputfield" value="This is some text" type="button">​
Javascript:
$('body').on('click', '#myinputfield', function(){
var textField = $('#myinputfield');
textField.val(textField.val()+' after clicking')
});​
HTML
<form>
<input id="myinputfield" value="This is some text">
<br>
<button onclick="text()">Click me!</button>​
</form>
Javascript
const myinputfield = document.querySelector("#myinputfield");
function text() {
myinputfield.value = myinputfield.value + "after clicking";
}
I know this question is almost ten years old but this answer does not use jquery so it may be useful to others.
https://codepen.io/frog22222/full/oNdPdVB

Categories