Is this a bug or intended design of FireFox? - javascript

In FireFox, using JavaScript, when a user presses enter to select "ok" on an alert Window the onkeyup get fired. In Internet Explore this does not happen.
This HTML code demonstrates what I'm saying. Open it, type a character in the text field and select "ok" by pressing enter. Try it in FireFox and IE.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JS example</title>
<script type="text/javascript">
function popup()
{
alert("bam")
}
</script>
</head>
<body>
<form>
Each inputted character causes an alert window:<input type="text" onkeyup="popup()" />
</form>
</body>
</html>
Is this as designed or is this a problem? How do you prevent FireFox from firing again?
EDIT: I found it on bugzilla, does bugzilla have a "vote-up" or equivalent feature? This through me astray when trying to trouble shoot and I was looking for infinite loop/recursion in the function that was being called.

This is because Firefox destroys its alerts much more quickly than other browsers, and it's possible for the focus to return to your field while the Enter key is still down. It's possible to reproduce this in other browsers by holding the Enter key down a bit longer.

Related

I use "onclick" function to simulate click color picker but it doesn't work . Windows and android are work well , only ios doesn't work

I want to simulate click color picker ,when I test it on ios ,it doesn't work. I try simulate click input submit, it's work. Then I changed another color picker(jscolor), He can only work by clicking directly, He can't simulate click work by using other buttons. All the problem is on the ios, conputer and android don't have this question.
This is the Minimal code so you can Reproduce the problem.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function gg() {
document.getElementById('ssw').click();
}
</script>
</head>
<body>
<input type="button" value="ssss" onclick="gg()">
<br><br>
<input type="color" id="ssw">
</body>
</html>
On ios I can't trigger the color picker by clicking this button(ssss), I want to hide the color picker and use other button to trigger color picker,of coure it's failed.
I try the fastclick.js to fix 300ms delay on ios , but it no use . I am a novice , This problem has plagued for several days ,Thank you for helping me check the problem .

Wrong getting value when key is pressed

I try to get value from text input when key is down.
My code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<input type="text" onkeydown="console.log(this.value)">
</body>
</html>
Code demo: http://jsbin.com/funexipure/1/edit?html,console,output
Trouble description:
When I write 1 I have "" as value in console.
When I write 2 after this I have "1" as value in console, and so on
So, How I can get actual current value when key is down? Thank you very much.
You can use onkeyupto get what desire output is
<input type="text" onkeyup="console.log(this.value)">
Keyup function is quite good but it doesn't work if you paste the value with mouse click.
Try this
$('input').on('input propertychange', function(){
console.log($(this).val());
})
This will work in keyboard typing also when you paste with mouse click.
Reason
keyup check when you press the key from keyboard but propertychange work when you change any property anyway.

Is it possible to disassemble html?

For testing purpose I create simple html with one button. When you click on button it show you alert. I try to to change button text value with olly, ida, and cheatengine to some other value but it doesn't work. Why?
Is it possible to change value of variable of html, is it possible to disassemble program like iexplorer?
Simple html on what i worked look like this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function myFunction()
{
alert("I am an alert box!");
}
</script>
</head>
<body>
<input type="button" onclick="myFunction()" value="Show alert box" />
</body>
</html>
If you're using Internet Explorer 9, hit F12 to enable the developer tools. This will show you the structure of your HTML, which you can then change. These will also allow you (via the Script tab) to set breakpoints and debug your JavaScript. From here you can change variable values.
For older versions of IE, similar functionality (though not including JavaScript debugging) is available in the Developer Toolbar.
If you're using FireFox, try FireBug.
If you're using Google Chrome, hit F12 to display the developer tools.
Your terminology isn't correct by the way: HTML does not get compiled (or assembled), so the idea of disassembling it isn't valid. The word you're probably looking for is debug.
If you're using Internet Explorer, don't hit F12 to enable the developer tools. This will only show you the structure of your HTML badly, which you can then change with difficulty.
Instead, make sure you're using FireFox, and then install the extension FireBug which will enable you to view and edit HTML/CSS and Javascript live in the browser (and much more).
Is this what you mean you want?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function olly()
{
alert("Olly");
}
function cheatengine()
{
alert("cheatengine");
}
</script>
</head>
<body>
<input type="button" onclick="olly()" value="olly" />
<input type="button" onclick="cheatengine()" value="cheatengine" />
</body>
</html>

Testing if an upload field will accept "click"

So, I would like to be able to have people click on a link, and the an input field with a file will open. But I only want this to happen if the browser has support for it. As pointed out in this answer, chrome supports this. Firefox 3.6 does not, but Firefox 4 should.
I know you can frequently test for support of features in javascript, but I'm unsure how to test for this feature.
If you'd like to see what I mean, the below code shows the feature when clicking on the link. You can also play with this on my page.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Upload Field Click Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var clicker = document.getElementById('clicker');
var uploader = document.getElementById('uploader');
clicker.addEventListener("click", function(e) {
uploader.click();
e.preventDefault();
}, false);
});
</script>
</head>
<body>
<form>
<input type="file" id="uploader">
</form>
Should click the uploader
</body>
</html>
Things that do not work:
testing !uploader.click
seeing if uploader.click() throws an exception
You could use JQuery to dynamically write the HTML into the document at the appropriate place
$("#mylinkID").after('Whatever');`
and the link would be added after the element that contained the ID "mylinkID". If no support for JS, the link doesn't get displayed.

Mobile Safari scrollTo w/ textarea bug

Have stumbled upon what seems to be a bug with how mobile safari renders the cursor when a window.scrollTo() is executed while a user is entering text into a textarea. Have attached source code which illustrates the issue. I'm wondering if anyone has any advice on how I might work around this.
The issue: If a user is entering text into a textarea and a window.scrollTo() is executed, the cursor remains rendered at the position the textarea used to be, not at it's current position.
To recreate: Load the following web page using mobile safari. Touch the textarea, which will open the keyboard. Type a couple of characters and wait. As text is added dynamically to the page, and the window scrolled, you'll see the cursor artifact
Have tried setting the focus() back to the textarea after the scroll, but that doesn't seem to have any effect.
Thanks!
<html>
<head>
<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />
<style type="text/css" media="screen">
textarea {
margin-top:50px;
}
</style>
<script type="text/javascript" charset="utf-8">
window.addEventListener('load', function() {
setTimeout(addContent,5000);
}, false);
function addContent() {
var elem = document.createElement('p');
elem.appendChild(document.createTextNode('Some new text'))
document.getElementById('newContentContainer').appendChild(elem);
window.scrollTo(0,20);
setTimeout(addContent,5000);
}
</script>
</head>
<body>
<div id="newContentContainer"></div>
<div>
<textarea></textarea>
</div>
</body>
</html>
Here's a photo which shows the problem:
I'm pretty sure this may solve the problem, and most likely will also make the on-screen keyboard flash off and back on for a tiny bit too. Call this code after you use scrollTo():
yourTextArea.blur();
yourTextArea.focus();

Categories

Resources