I have a web application with no images in it. It is for visually impaired people. It is navigated using TAB button. How can I get the title/text of the selected web page like button,menu,etc. By selected I mean using TAB button, not mouse click. Using Javascript or any other language.
Use .focusin() method of jQuery library. Try to navigate on the form inputs from the snippet below using TAB button.
$(document).focusin(function(e) {
console.log(e.target.name);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#">
<input type="text" name="input1"/>
<input type="text" name="input2"/>
<input type="text" name="input3"/>
</form>
I used name property of the event target in my example, but you could get any property value. For example
$(document).focusin(function(e) {
console.log($(e.target).attr("type"));
});
It is possible to get id and another info by same way.
Related
I'm attempting to use jAlert to show a popup dialog with an input box. When clicking "OK" I want to grab the value from this input box to send to the server. I'm using jQuery to pull the content off a div which includes the input field. Problem is that when I use jQuery to try and get the contents of that input field, it doesn't work - it comes back as empty.
HTML as follows:
<div id="test">
<input type="text" id="def" />
</div>
JS as follows:
$.jAlert({ 'content' : $("#test").html()});
...and to try and access using jQuery...
$("#def").val();
I can get around it by force updating the field using a keyup listener, but it seems really clunky...
<input type="text" id="def" onkeyup="$('#def').val($(this).val())" />
After doing this I can access the content of the 'def' field. Is there a more elegant solution?
Let's consider the two following line:
mydomain.com?quantity=10
<input type="text" name="quantity" size="1" value="1" />
Is there any way for me to automatically change the value of "quantity" in the URL when a new value is typed by the user (by using the input) ?
Submitting the element value in a form automatically updates the URL with the current value for quantity. If you use the onchange event to trigger submit, the URL will not change until the user clicks outside the input:
<form>
<input type="text" name="quantity" size="1" value="1"
onchange="this.form.submit()" />
</form>
Variations of this could look at keyboard events whilst focus is still with the input element. It remains to be seen if reloading the page would be user friendly and it is not clear if this is indeed what you wish to happen. If you don't want to reload the page see the comment and link from #igwan regarding using the history api (check on MDN for browser support).
No. All javascript code affect only the document part of the browser. It can send you to another page where the quantity can be changed though.
I have been using a datepicker js class known as tcal. After you link to the class on your server, you can call it with one line of code.
in header
<link rel="stylesheet" type="text/css" href="tcal.css" />
<script type="text/javascript" src="tcal.js"></script>
html
Pick date: <input type="text" size=8 name="eventdate" class="tcal" value=>
It has been working fine.
However, to streamline a page, I am now trying to take it out of the html and display it in a div only when a user clicks on it using getElementById. while I can display the input box ok, when written to the browser this way, the class no longer seems to work.
js
function pickDate() {
document.getElementById('show').innerHTML = 'Pick date: <input type="text" size=8 name="eventdate" class="tcal" value=>';
}
html
Pick Date<div id="show"></div>
When user clicks, input box appears. However, datepicker calendar does not pop up when you click in tox. Does anyone know why tcal is not working when written to browser this way?
Thanks for any suggestions.
the reason for this happening is that you are adding input box in the dom later your datepicker code is initialized just reinitialize datepicker code
as i see your library may don't have a code to initialize is seperately you can do hide and show instead of adding into the dom later, if the text box will be available in the starting of page ready it will be initialized so use the following code
html -
<div id="something" style="display:none;">Pick date: <input type="text" size=8 name="eventdate" class="tcal" value=></div>
js -
document.getElementById('something').style.display="block";
I have a button called "Next" that exists in a couple of asp.net pages. Actually it is in a User Control. When "Next" is clicked it calls a function CheckServicesAndStates in JavaScript. I want to know the page that has initiated this "Next" button click.
Can anyone tell me how is this possible?
Add a hidden field to the form then check for the existence of it:
<input type="hidden" name="sender" value="page-name" />
In a <button> event handler this.form.name is the name of the containing form.
<form name=foo>
<button type=button onclick="alert(this.form.name)">
</form>
alerts "foo" when clicked.
window.location.href
contains the current url.
I'm trying to achieve the following behaviour in html: user is presented with a form involving several text fields. The fields are populated with default values, but in many cases the user will wish to enter their own. When the page loads, the value in the first field is selected, so the user can either replace it by simply starting to type and tabbing out to the next field, or simply leave it and tab out. Here's a pared down example of what I have:
<html>
<body onload="document.getElementById('helloField').select()">
<form>
<input id="helloField" value="hello"/><br/>
<input value="goodbye"/><br/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
This works in Chrome (and Firefox I believe, but I don't have it here). In IE, the field is selected as intended, but when the user hits tab, the browser tabs out to its address bar rather than to the goodbye field. If I replace the select with a simple focus, like
<body onload="document.getElementById('helloField').focus()">
the tabbing is okay in all browsers, but this isn't what I want. I want the user to be able to start typing right away to replace the default value.
Anyone have any ideas?
Thanks.
Focus, then select.
Also consider putting the code in a script block directly after the input in question. If you have a bunch of images on the page, document.onload can fire quite a lot later, and the last thing you want is to be typing away in an input box when onload fires and hijacks your focus (making you delete the contents of the box).
<input id="helloField" value="hello"/><br/>
<script type="text/javascript">
var hello= document.getElementById('helloField');
hello.focus();
hello.select();
</script>
Try setting the tab order of the fields using tabindex:
<html>
<body onload="document.getElementById('helloField').select()">
<form>
<input id="helloField" value="hello" tabindex="1" /><br/>
<input value="goodbye" tabindex="2" /><br/>
<input type="submit" value="Submit" tabindex="3" />
</form>
</body>
</html>