Code can be tested here: http://jsfiddle.net/yWUTK/3/
<textarea id='textbox'></textarea>
<span onclick="$('#textbox').text('One');">One</span>
<span onclick="$('#textbox').text('Two');">Two</span>
Behaviour for this in Chrome and Firefox is the same, you click One or Two and it changes the textarea. However, on firefox, if you then manually change the content of the textarea, it no longer updates when you click. Chrome continues to work fine.
I'm running firefox 3.6.15
Can anyone explain this behaviour? I'm not sure if I am doing something wrong, or if it's a genuine bug. My actual implementation uses proper markup and $(document).ready etc.
You are indeed correct, however, changing them to val() works.
<span onclick="$('#textbox').val('One');">One</span>
<span onclick="$('#textbox').val('Two');">Two</span>
val() is arguably the more correct method to use as well.
Also, I'm sure you are aware, you shouldn't use inline event handlers except in trivial examples like above.
Related
I have come across a strange issue which seems to be browser related(IE9 and lower vs. IE11), but would like to know why the strange behavior.
Issue Description:I use a spring framework and use its related taglibs to retrieve data on my JSP. There is a variable called index which I retrieve from the form and it used to be retrieved in the following manner.
<html:hidden property="index" name="pdmAcctSuppressForm" />
Value for the above variable namely index was accessed in a javascript using the following code snippet.
var index = document.getElementById("index").value;
The javascript seems to work as expected and retrieves the actual value in all IE browsers until IE9, but seems to fail to work on IE11. document.getElementById("index") returns invalid on IE11.
Solution: The problem has been resolved by changing the above mentioned taglib implementation from
<html:hidden property="index" name="pdmAcctSuppressForm" />
to
<input type="hidden" name="pdmAcctSuppressForm" value="${pdmAcctSuppressForm.index}" id="index"/>
I would like to know what has been changed on IE11 which renders the implementation unusable and also if the solution I have quoted is the right and efficient one.
The javascript seems to work as expected and retrieves the actual value in all IE browsers until IE9, but seems to fail to work on IE11.
...
I would like to know what has been changed on IE11 which renders the implementation unusable and also if the solution I have quoted is the right and efficient one.
You should have had that problem with IE8 as well. Through IE7, IE had a bug: It found elements using getElementById that didn't have the id you asked for, but did have a name that matched. That is, in IE8 and earlier:
<input name="foo">
...would be found by document.getElementById("foo").
This was a bug (although for a while Microsoft called it a feature, and documented it), and it was fixed.
More (on my blog):
...by any other name, would smell as sweet
I have created a little tooltip framework, which works fine in all modern browsers. There's one thing that really bugs me: in Firefox this seems to disable displaying a regular title (from the title attribute).
I can't find a cause for this. It's not the mouseover handler that I assign for certain elements, because on regular (non handled) elements, titles are not displayed either. Furthermore, I experimented with this (see this JSFiddle, and it was not replicable).
Can this be some known Firefox bug (I searched the Internet for that, but I didn't find anything relevant) or am I doing something wrong in my scripting, HTML, or CSS?
I've put the whole thing in this JSFiddle.
[edit april 2022] This is a very old question. Do disregard it.
title is displayed in my Firefox, and Firefox doesn’t have any bug regarding the same. Try updating your Firefox, or maybe some plugin in your browser may be causing the tooltip to hide.
I'm having an issue where, periodically, I am unable to type into any input/textareas on Internet Explorer. I'm working primarily with IE9 at the moment.
When I click on an input, the JS click handler (which empties placeholder text) runs, and the active css is applied. However, the cursor does not appear and I can't type. If I tab to an input field, and start typing, everything starts working again.
I have a fair bit of JS running, but no errors running. I suspected TinyMCE had something to do with it, but it also happens when there are no editors on the page, so that doesn't seem to be it either. If you don't have an answer, I'd love an idea of what could be happening here that I could look into more, since I'm a bit stumped.
I eventually solved this. It was a strange and nasty issue with TinyMCE, where TinyMCE was being destroyed while the cursor was inside the main window. Fix was to explicitly focus out before it gets destroyed.
I had a similar issue once with I.E. where I was using .split to make sure the input box was not empty when gaining focus. However, I.E. did not support .split and would crash my js. I had to write my own and it ended up working out. Not sure if this in any way applies to what you are doing, but I thought I would just throw it out there.
Since you have lots of javascript on the page, a likely reason would be either a naming conflict or even more likely a js crash. Traverse your code for the 200th time.
My HTML is something like this :
<select>
<option>ABC (123)</option>
<option>XYZ (789)</option>
</select>
What I'm trying to do is: using JQuery and a regex, I replace the "(" with <span>( here's my JQuery line:
$(this).html($(this).html().replace(/\(/g,"<span>("));
It's working as intended in Firefox, chrome and safari, but (as usual) not behaving correctly on IE6/IE7 (the text after "(" just get removed)
Any thoughts ?
PS: I'm doing it this way because I need "(number") to be in a different color, and <span> in a <option> is not valid.
I don't think it's the regex breaking. The below works fine in IE7:
alert("(test".replace(/\(/g,"<span>("));
What's probably happening is that IE6/7 have no clue how to render a span inside an option and just fails to display anything.
You're saying that span in an option is not valid, and yet that's exactly what you're trying to add. Invalid code isn't prettier just because it happens to be valid at load-time, if you know you're going to mess it upp later. So really, if that's your only concern, do add this span declaratively in your HTML, rather than injecting it later.
But if you want to fix this, I think it might help if you rewrite the regex to cover the entire tag. In a lot of cases, IE doesn't let you just change the HTML to whatever, but will use its own internal representation to fix up the code, according to its own preferences. When you write a table, for instance, IE will always internally infer a tbody, even if there isn't any in the code. In the same manner, if you inject a <span> and there's no </span>, IE might insert one by itself. To get around this, make sure you inject the code in its entirety in one go:
$(this).html($(this).html().replace(/\((.*?)\)/g,"<span>($1)</span>"));
I don't have IE7 but in IE6 the following
javascript:"<select><option>ABC (123)</option><option>XYZ (789)</option></select>".replace(/\(/g,"<strong>(")
yields
<select><option>ABC <strong>(123)</option><option>XYZ <strong>(789)</option></select>
And gets correctly displayed (aside that <strong> has no effect). Also works fine when using <span> instead of <strong>
Why isn't the following piece of code working in IE8?
<select>
<option onclick="javascript: alert('test');">5</option>
Quite bizarre - no alert is shown in IE8. I do not see the error icon in the left corner as well. Of course it works in FF and Opera. Any ideas?
Putting an onclick handler on an <option> element seems.... weird to me. You might want to switch that to the more common onchange event of the <select>. You can still do whatever you want to do from there, and this is the "accepted" way of doing whatever you want to do to the select. That being said, you might want to try removing the javascript: part of it. That is only needed when you are executing Javascript in a link href for example. An onclick handler expects javascript.
Have you tried just:
onclick="alert('test');"
Pretty sure you don't need the javascript: prefix.
All versions of IE (6,7,8) do not support ANY event handlers on the option elements.
This is a (fairly) well known bug that the IE team has indicated they are in no rush to fix. :-(
Then again Opera, Safari & Chrome all have limited or no support for event handlers on options too.
Lack of events on options: bug 280
(related) Lack of styles on options: bug 281
It should be noted that "Edge" (think IE12 on Windows 10) is currently showing that this issue is fixed in preview releases.