This code works fine in <= IE7, but it doesn't work in firefox .. i am using firefox browser 12.0 .. I am not sure whats the reason .. help would be much appreciated .. thanks ..
<head>
<script type="text/javascript">
function getfocus(obj){
if(obj.value.length==0){
alert("Please enter something");
obj.focus();
}
}
</script>
</head>
<body>
<input type="text" onblur="getfocus(this)" value="Get focus">
</body>
</html>
try:
....
alert("Please enter something");
setTimeout(function() {
obj.focus()
}, 10);
Some browsers, notably Firefox, have user-specific settings which control whether focus may be 'stolen' from the user. I think this may be your problem here.
However, you might want to re-consider your tactics here for ensuring the user enters some text. Having an alert pop-up every time you unfocus a blank text field would be extremely irritating to most users.
The code is working fine to me both on FF 12 and Chrome.
You need to clear the input filed and then get out of the item in order to see the alert...
Related
I am having an issue when using the HTML5 input fields with type set to "date".
My test page is as follows:
<!DOCTYPE html>
<html>
<head>
<script>
function testDate() {
window.alert("Date: " + document.getElementById("date").valueAsDate.toJSON());
}
</script>
</head>
<body>
<form>
<label for="date">Date</label>
<input id="date" type="date" onchange="testDate()" required />
</form>
</body>
</html>
If I load this page in Opera, I am presented with a 'date picker'. If I select the 10th of August 2016, I am presented with a popup window which exhibits the correct behavior i.e. it displays the following:
"Date: 2016-06-10T00:00:00.000Z"
If I load the page in Firefox, I do not get any kind of 'date picker' and it will let me enter any value I want. I have tried the following input:
10/08/2016
10-08-2016
2016-08-10
In all cases I get the following logged to the console:
TypeError: document.getElementById(...).valueAsDate is undefined
In my real code, I simply want to allow a user to select a date, convert it to a JSON date, and then send it over an XMLHttpRequest, but I can't seem to find any consistency in the date format.
Can someone assist?
Currently it is too soon for using the fields if you are not creating the browser-specific web application. As you can see here - Firefox, Safari and Internet Explorer has no support for this kind of input fields.
You can try to use the pattern attribute which can be used for a simple validation of the user input. It has a better support, but still it is not perfect.
You can also try to use one of these vanillaJS datepicker implementations.
I need to code a number of trials for a JsPsych experiment displaying a simple math question. The user must answer in a textbox as fast as possible and then press the Enter key to move to the next question. And so on.
On each question, a single textarea is shown for the user to type his/her answer, and such textarea must have focus immediately.
I've modified the survey-text plugin to continue through trials by pressing Enter, as well as adding the autofocus property on creation of each textbox. Problem is that autofocus works only for the first trial, and stops working for the rest.
Code is provided below (in order to work, JsPsych folder must be on the same dir):
<!doctype html>
<html>
<head>
<title>Habilidad Aritmetica</title>
<!-- Inicio llamada a libreria JsPsych + Plugin -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jspsych-5.0.3/jspsych.js"></script>
<!-- Plugin para recibir texto estilo survey -->
<script src="jspsych-5.0.3/plugins/jspsych-survey-text.js"></script>
<!-- Plugin para desplegar elementos tipo instrucciones -->
<script src="jspsych-5.0.3/plugins/jspsych-instructions.js"></script>
<!-- *** CSS *** -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="centered">
<script>
var aritm01={
type: 'survey-text',
timeline:[
{
questions:['<p>preg 1</p>']
}
]
};
var aritm02={
type: 'survey-text',
questions:['<p>preg 2</p>']
};
var aritm03={
type: 'survey-text',
questions:['<p>preg 3</p>']
};
function advance(event){
$("textarea").keydown(function(event){
console.log(event.keyCode);
//event.preventDefault();
if (event.keyCode == 13) {
console.log("User pressed enter. Clicking continue button");
var btn = document.getElementById("jspsych-survey-text-next");
btn.click();
//event.preventDefault();
}
});
}
function recoverfocus(event){
$("textarea").focus();
}
var second_battery = [];
second_battery.push(aritm01);
second_battery.push(aritm02);
second_battery.push(aritm03);
jsPsych.init({
timeline: second_battery,
on_finish: function(){
jsPsych.data.localSave('second_battery_results.csv', 'csv');
},
default_iti: 0
});
</script>
</div>
</body>
</html>
From JsPsych's survey-text plugin side, the important change is:
focused_box = $("#jspsych-survey-text-" + i).append('<textarea autofocus onfocus="advance(event)" onblur="recoverfocus(event)" required name="#jspsych-survey-text-response-' + i + '" cols="' + trial.columns[i] + '" rows="' + trial.rows[i] + '"></textarea>');
(yes, I know that in-line javascript is a bad idea, but so far is the only way I managed to make it work)
Stuff I've tried:
A lot of similar questions suggest the use of getElementById()
method, or getElementsByTagName() in order to handle the DOM
element, but for some reason none of them works.
I've also tried
using a timer to focus text areas, as suggested here (
the other solutions suggested on that topic didn't work neither).
As you can see from my
code, I'm trying to "recover" the focus using a function, which
triggers on Blur. I've also tried such approach onLoad(), with no
results in both cases.
I've tried displaying the questions on a
nested timeline inside a single trial, instead of using many trials.
No luck neither.
Am I missing something?
Some extra notes:
As you can guess from this question's tags, JQuery and HTML5 specific functions are totally allowed as solutions, in case that making autofocus work on its own isn't possible. No need to restrict yourselves, have fun.
This behavior has been tested on latest version of Firefox for Ubuntu 16, as well as the latest version of Chrome for Windows (Windows 10 specifically).
UPDATE: You can try this code here
You can apply the focus after you append the element to the page. In your modified survey-text plugin, try this on line 63:
$("#jspsych-survey-text-" + i +" textarea").focus();
This might make other things that you have in the code obsolete, but I didn't try any other modifications.
I have been working on a little project for a day or two. The code is the following.
<!DOCTYPE html>
<html>
<head>
<script>
function search()
{
document.getElementById("text1").value
window.location.hash = "myVariable";
}
</script>
</head>
</body>
<form name="myform">
<input type="text" name="text1" value="">
<input type="button" value="Search" onclick="search()">
</form>
<div style="height: 4000px"></div>
<span id='yeah'>I have successfully jumped.</span>
<div style="height: 4000px"></div>
</body>
</html>
Now you may be wondering what am I trying to accomplish with this code? Well, I want to be to enter a value in the text box and then it will jump me to the section (the section is the value in the text box). It is sort of like a search engine, but it is not.
For example the section is yeah. When a user enters yeah in the text box it is supposed to jump them to the yeah section. Instead nothing happens. And despite looking all over the Internet I have not found an answer that satisfies my needs, so I would kindly ask that you please explain to me what my problem is and possibly give me a solution to my problem.
I am using the Mozilla Firefox web browser (if that information is necessary).
Try this:
function search()
{
var elID= document.getElementById("text1").value;
var el = document.getElementById(elID);
el.scrollIntoView(true);
}
The Element.scrollIntoView() method scrolls the element into view
Online Demo
Dalorzo's should work, but jQuery could be the better option than raw javascript if you plan to add more than just this function.
Here's a fiddle of what you're trying to do.
$("#button1").click(function() {
var t = $("#text1").val();
alert(t);
$('html, body').animate({
scrollTop: $("#"+t).offset().top
}, 2000);
});
im trying to find a way to dispay a div when a user types in the textarea field and then hide the div when they take the text out again.
I am using IE 9 and it must be compatible with that, although i am having a lot of trouble finding a script that IE 9 supports.
I did find this script which works in JSFiddle on my IE 9 browser
link: http://jsfiddle.net/THkqE/
but not when i try and code it into my site myself like so:
<head>
<script>
$(document).ready(function() {
$("#cname").on('input', function() {
$('#cname2')[this.value.length > 8 ? 'show' : 'hide']();
});
});
</script>
</head>
<input type="text" id="cname" name="cname" class="field">
<div id="cname2">cname2</div>
css:
#cname2{
display:none;
}
can someone please show me what i am doing wrong, thanks
I have a textbox, and I am trying to fire an event oninput (my example below only removes a comma from the input, however I do need it to do more advance things). My code works great on Firefox and Internet Explorer, however when I click into the textbox in Chrome, I have about .5 seconds to start typing, otherwise I loose focus. Testing the exact code below on my website creates the error. Any idea?
<input type="text" id="question" name="question" oninput="clean(this);" />
<script type="text/javascript">
function clean(q){
q.value=q.value.replace(",","");
}
</script>
Thanks for any help
Credit goes to ComFreek and RobH for pointing it out that it works just fine on JS fiddle. I feel quite dumb for not trying it first. Turns out that some of the other Javascript on the page was causing the trigger to break. Thanks for everyone's help!
You can try to set a timer to run the code in the function.
<input type="text" id="question" name="question" oninput="clean(this);" />
<script type="text/javascript">
function clean(q){
window.setTimeout(function(){
q.value=q.value.replace(",","");
}, 0);
}
</script>
Try to use <input onkeyup="clean(this)">, it will only fire the function after something is typed into the input.
http://www.w3schools.com/jsref/event_onkeyup.asp
If you are going to do some complex things I'd recommend you use jQuery, because will fix this crossbrowser errors.
and use something like:
$('#input-desired').bind('keyup', function() {
this.value = this.value.replace(',', '');
});
If you wanna go for a simple application you can try this.
<input type="input" id="desired" onkeyup="desiredInputChanges(this);" />
In your Javascript file use something like:
desiredInputChanges = function (input) {
input.value = input.value.replace(',', '');
}
Just a note, don't forget to make a function to be your class and protect your methods :)