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();
Related
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.
So I have a div that holds many buttons that gets created dynamically.
By using the following:
var s = document.getElementById("CancelColumn").innerHTML;
s = s+ "<input class=\"CancelButt\" type=\"button\" value=\"X\" onclick=\"deleteRow(\""+value+"\",this)\">" ;
document.getElementById("CancelColumn").innerHTML = s;
The problem however is that in firefox the html is showing up as this:
<input class="CancelButt" type="button" SomeString",this)"="" onclick="deleteRow(" value="X"></input>
where the value is "SomeString".
In chrome it is a bit different though. The string has an extra space and the tag doesn't seem to be working correctly.
Here it is:
I want it to show the following:
Where "this" is the button that is calling the function.
Any suggestions?
I'm not sure why this is happening, but you should improve your code anyway. Here's an example of improved code.
var element = document.getElementById('CancelColumn');
newInput = document.createElement('input');
newInput.type = 'button';
newInput.value = 'X';
newInput.className = 'CancelButt';
newInput.onclick = deleteRow.bind(null, value, newInput); // whatever value is?
element.appendChild(newInput);
It's a lot cleaner and readable, I'm not surprised you're facing problems with the code you have.
Seems like such an inelegant way of doing it
Why not try this?
var inp = document.createElement('input');
inp.setAttribute('class', 'CancelButt');
inp.setAttribute('type', 'button');
inp.setAttribute('value', 'X');
inp.onclick = deleteRow.bind(inp, 2, inp); // you don't really need to pass the 'this' value to the deleteRow function though
Then you can just append the inp to your #CancelColumn
Try this
s = s+ "<input class='CancelButt' type='button' value='X' onclick='deleteRow('"+value+"',this)'>" ;
Change your s = s+ "<input class=\"CancelButt\" type=\"button\" value=\"X\" onclick=\"deleteRow(\""+value+"\",this)\">" ; as s = s+ "<input class='CancelButt' type=
'button' value='x' onclick='deleteRow('+value+',this)\'">" ;
How about this:
s = s + "<input class='CancelButt' type='button' value='X'
onclick='deleteRow("+value+",this)'/>";
I'm not sure if I understand your question correctly...
Do you want to have a div which you dynamically populate with buttons and when you click any of those buttons, they will move to another div?
In that case, I think your question is similar to this question - How to move an element into another element?
From Alejandro Illecas answer:
MOVE:
jQuery("#NodesToMove").detach().appendTo('#DestinationContainerNode')
COPY:
jQuery("#NodesToMove").appendTo('#DestinationContainerNode')
note .detach() use. When copy be careful do not duplicate id's.
JSFiddle
I modified his solution in this JSFiddle in which you can see that you don't need a very cumbersome script to manage a move of an element.
jQuery
function moveButton(elem){
if( $(elem).parent().attr("id") == "nonSelected" ){
$(elem).detach().appendTo('#selected');
}
else{
$(elem).detach().appendTo('#nonSelected');
}
}
HTML
As you can see here, you can use different kinds of elements as well...
<div id="nonSelected">
<!-- TWO INPUT TAGS -->
<input id="btnDefault" onclick="moveButton(this)" type="button" class="btn btn-default" value="Default" />
<input id="btnPrimary" onclick="moveButton(this)" type="button" class="btn btn-primary" value="Primary" />
<!-- THREE BUTTON TAGS -->
<button id="btnDanger" onclick="moveButton(this)" type="button" class="btn btn-danger">Danger</button>
<button id="btnWarning" onclick="moveButton(this)" type="button" class="btn btn-warning">Warning</button>
<button id="btnSuccess" onclick="moveButton(this)" type="button" class="btn btn-success">Success</button>
</div>
<div id="selected">
</div>
I just made a timer with control, but in the control button i need some help.
Initially there have a button with START value. have to change the class and value to "STOP" for the 1st click and for the 2nd click change the class & value to "RESUME".
DEFAULT. <input class="start" type="button" value="START" />
1st click. <input class="stop" type="button" value="STOP" />
2nd click. <input class="resume" type="button" value="RESUME" />
3rd click. <input class="stop" type="button" value="STOP" />
4th click. <input class="resume" type="button" value="RESUME" />
Can you help me in this? and forgive my bad English.
FYI: i am using JQUERY MOBILE.
I haven't worked in JQuery mobile but this should be the way
JQuery
$(document).ready(function(){
$('input').click(function(){
if($(this).hasClass("start")){
$(this).removeClass("start");
$(this).addClass("stop");
$(this).val("STOP");
}else if($(this).hasClass("resume")){
$(this).removeClass("resume");
$(this).addClass("stop");
$(this).val("STOP");
}else if($(this).hasClass("stop")){
$(this).removeClass("stop");
$(this).addClass("resume");
$(this).val("RESUME");
}
});
})
for reference http://jsfiddle.net/zGMWR/1/
hope it helps
P.S. please put specific selector in jquery for your button.
Your initial value 'start' is irrelevant here as it only appears the very first time. So a simpler solution would be:
$(':button').on('click', function(){
$(this).removeClass('start stop resume');
if (this.value !== 'STOP') {
this.value = 'STOP';
$(this).addClass('stop');
} else {
this.value = 'RESUME';
$(this).addClass('resume');
}
});
An even shorter version would be:
$(':button').on('click', function(){
this.value = this.value !== 'STOP' ? 'STOP' : 'RESUME';
$(this).removeClass('start stop resume')
.addClass(this.value.toLowerCase());
});
Side info: answer from PSK: 376 Bytes; first answer here: 223 Bytes; second answer: 174 Bytes
Of Course you can wrap it in a $(document).ready(function(){ function if necessary
See http://jsfiddle.net/zGMWR/2/ and http://jsfiddle.net/zGMWR/3/ how it works
For a more specific selector and using event delegation you could use:
$('form').on('click', ':button', function(){...
or give the button an even more specific class name such as play-button
html:
<script src="http://zurb.com/playground/javascripts/plugins/jquery.textchange.min.js"></script>
<form>
<input type="text" name="comment" id="comment" placeholder="Comment" maxlength="140" value=""/>
<div id="charactersLeft"></div>
<input type="submit" id="commentButton" data-icon="edit" data-inline="true" data-mini="true" data-theme="b" value="Send" disabled="disabled"/>
</form>
<div id="actionList">
</div>
js:
$('#comment').bind('hastext', function () {
$('#commentButton').button('enable');
});
$('#comment').bind('notext', function () {
$('#commentButton').button('disable');
});
$('#comment').bind('textchange', function (event, previousText) {
$('#charactersLeft').html( 140 - parseInt($(this).val().length) );
});
$('#commentButton').click(
function(){
$('#actionList').prepend('<p class="item">' + $('input[name=comment]').val().trim() + '</p>');
$('#commentForm').each (function(){ this.reset(); });
//document.getElementById('commentForm').reset();
$(this).button('disable');
}
);
On Fiddle its works another, that on my machine. So, test local. The problem is: when I write a comment, than I click on the button, comment apears in #actionList, the button blocked. Nice. But. If I want to write a new comment, the button will be disabled. I have text in input, but I cant click button. I deleted my new text in input, and than I can write something and button finally enabled.
Its very strange, how to fix it? Thanks.
I added the line, to remove comment once posted:
$('#comment').val("");
I also replaced your hastext and notext functions with this code, added in the textchange function:
var tb_value = this.value;
if (tb_value == "") {
$('#commentButton').button('disable');
} else {
$('#commentButton').button('enable');
}
See the Fiddle.
I have a button which is enabled at the beginning, but I want to disable it. I need it for a game. If the player chooses to play more, the game starts again, if not, the button "Click on me" should be disabled. Thank you in advance!
Here is my code:
var y;
function playAgain()
{
y=confirm("PLAY AGAIN?");
if(y==true)
{
alert("Let's play it again!");
location.reload(true);
}
else if(y==false)
{
alert("Thank you!\nSee you soon!");
document.getElementById("button").disabled="disabled";
//document.getElementById("button").disabled="true";
}
}
The HTML code:
<body>
<input type="button" value="Click on me" onClick="playAgain()" />
</body>
This will work:
document.getElementById("button").disabled = true;
If your button actually has id="button":
<input id="button" type="button" value="Click on me" onClick="playAgain()" />
To re-enable the button set .disabled = false;
You're using document.getElementById("button") but there is no element named button in the HTML.
<input type="button" id="button" value="Click on me" onClick="playAgain()" />
Also, to disable a button, set its disabled attribute to true (false for otherwise).
document.getElementById('button').disabled = true;
with jquery you can say
$("[type=button]").click(function(){
$(this).attr("disabled","disabled");
... your other code ...
});