Bug Tracker

#11791 closed bug (invalid)

Opened May 21, 2012 06:40AM UTC

Closed May 21, 2012 03:58PM UTC

Strange focus event behaviour in Firefox

Reported by: nately@interia.pl Owned by:
Priority: undecided Milestone: None
Component: unfiled Version: 1.7.2
Keywords: Cc:
Blocked by: Blocking:
Description

Hi, this is the complete code block example

Expected behaviour is: Once a user clicks the textbox and it has focus, a helper text is displayed right to it. The main requirement is that the focus behaviour is dynamically bound, because form fields can be dynamically added or removed.

There are three main switches which you can 'radio'-comment/uncomment A1, A2, A3 and three sub-switches B1, B2, B3 for A3. The bug appears only in Firefox (v.12 in my case, could not reproduce in other browsers - works as expected) and only in combination A3/B3 ($(document).on ).

The bug is that the event fires and the helper text is visible upon page entering, not after textbox gets focus.


<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
</head>
<body>
	<form id="form">
		<input type="text" placeholder="Enter username" id="username" data-val-init="Helper text" autocomplete="off">
		<label id="txtlbl" for="username" class="feedback"></label>
	</form>
</body>
<script type="text/javascript">
	/* A1 */
	/*$('#username').live('focus', function(){
		var text = $('#username').attr('data-val-init');
		$('#txtlbl').text(text);
	});*/
	
	/* A2 */
	/*$(document).on('focus', '#username', function(){
		$('#txtlbl').text($('#username').attr('data-val-init'));
	});*/
	
	(function ($) {
		$.fn.validate = function (options) {
			var defaults = {
				validatedFields: '',
			};
			var settings = $.extend(defaults, options);
			this.validateFields = function () {
				var valid = true;
				return valid;
			};
			return this.each(function () {
				$(settings.validatedFields).each(function () {
					var $field = $('#' + $(this).attr('id'));
					var $label = $field.next(settings.messageElement);
					/* B1 */
					//$field.live('focus', function () {
					/* B2 */
					//$field.focus(function () {
					/* B3 */
					$(document).on('focus', $field, function () {
						if ($field.val() == '') {
							$label.text($field.hasAttr('data-val-init') ? $field.attr('data-val-init') : '');
						}
					});
				});
			});
		};
	})(jQuery);

	/* A3 */
	$("#form").validate({ validatedFields: '#username' });
	
	$.fn.hasAttr = function (name) {
		return this.attr(name) !== undefined && this.attr !== false;
	};
	
</script>
</html>
Attachments (0)
Change History (2)

Changed May 21, 2012 06:47AM UTC by nately@interia.pl comment:1

I did not put this on JS fiddle because there it seems to be working fine (when I put the whole JS section into JS box)

Changed May 21, 2012 03:58PM UTC by dmethvin comment:2

resolution: → invalid
status: new → closed

This isn't really reduced to a bug report form, especially with all the confusing commented-out cases. Try the forum or StackOverflow and if the group collectively comes to the conclusion that jQuery is doing something wrong, open a ticket with a specific description. Also keep in mind that this may be a Firefox bug you should report to them, and not to us.