Bug Tracker

Opened 7 years ago

Closed 7 years ago

#11791 closed bug (invalid)

Strange focus event behaviour in Firefox

Reported by: nately@… 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>

Change History (2)

comment:1 Changed 7 years ago by nately@…

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)

comment:2 Changed 7 years ago by dmethvin

Resolution: invalid
Status: newclosed

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.

Note: See TracTickets for help on using tickets.