Highlight default submit button

adminer/static/default.css

@@ -21,6 +21,7 @@ code { background: #eee; }
 tbody tr:hover td, tbody tr:hover th { background: #eee; }
 pre { margin: 1em 0 0; }
 input[type=image] { vertical-align: middle; }
+input.default { background: #ddf; }
 .version { color: #777; font-size: 67%; }
 .js .hidden, .nojs .jsonly { display: none; }
 .js .column { position: absolute; background: #ddf; padding: .3em 1ex .3em 0; margin-top: -.3em; }

adminer/static/editing.js

@@ -291,7 +291,7 @@ function editingAddRow(button, focus) {
 	var match = /(\d+)(\.\d+)?/.exec(button.name);
 	var x = match[0] + (match[2] ? added.substr(match[2].length) : added) + '1';
 	var row = parentTag(button, 'tr');
-	var row2 = row.cloneNode(true);
+	var row2 = cloneNode(row);
 	var tags = row.getElementsByTagName('select');
 	var tags2 = row2.getElementsByTagName('select');
 	for (var i=0; i < tags.length; i++) {
@@ -434,7 +434,7 @@ function partitionByChange(el) {
 * @param HTMLInputElement
 */
 function partitionNameChange(el) {
-	var row = parentTag(el, 'tr').cloneNode(true);
+	var row = cloneNode(parentTag(el, 'tr'));
 	row.firstChild.firstChild.value = '';
 	parentTag(el, 'table').appendChild(row);
 	el.onchange = function () {};
@@ -447,7 +447,7 @@ function partitionNameChange(el) {
 */
 function foreignAddRow(field) {
 	field.onchange = function () { };
-	var row = parentTag(field, 'tr').cloneNode(true);
+	var row = cloneNode(parentTag(field, 'tr'));
 	var selects = row.getElementsByTagName('select');
 	for (var i=0; i < selects.length; i++) {
 		selects[i].name = selects[i].name.replace(/\]/, '1$&');
@@ -463,7 +463,7 @@ function foreignAddRow(field) {
 */
 function indexesAddRow(field) {
 	field.onchange = function () { };
-	var row = parentTag(field, 'tr').cloneNode(true);
+	var row = cloneNode(parentTag(field, 'tr'));
 	var selects = row.getElementsByTagName('select');
 	for (var i=0; i < selects.length; i++) {
 		selects[i].name = selects[i].name.replace(/indexes\[\d+/, '$&1');
@@ -506,7 +506,7 @@ function indexesAddColumn(field, prefix) {
 		select.selectedIndex = 3;
 		select.onchange();
 	}
-	var column = field.parentNode.cloneNode(true);
+	var column = cloneNode(field.parentNode);
 	select = column.getElementsByTagName('select')[0];
 	select.name = select.name.replace(/\]\[\d+/, '$&1');
 	select.selectedIndex = 0;

adminer/static/functions.js

@@ -240,7 +240,7 @@ function selectAddRow(field) {
 		selectFieldChange(field.form);
 	};
 	field.onchange();
-	var row = field.parentNode.cloneNode(true);
+	var row = cloneNode(field.parentNode);
 	var selects = row.getElementsByTagName('select');
 	for (var i=0; i < selects.length; i++) {
 		selects[i].name = selects[i].name.replace(/[a-z]\[\d+/, '$&1');
@@ -474,6 +474,7 @@ function selectClick(td, event, text, warning) {
 	}
 	td.innerHTML = '';
 	td.appendChild(input);
+	setupSubmitHighlight(td);
 	input.focus();
 	if (text == 2) { // long text
 		return ajax(location.href + '&' + encodeURIComponent(td.id) + '=', function (request) {
@@ -536,3 +537,88 @@ function eventStop(event) {
 		event.cancelBubble = true;
 	}
 }
+
+
+
+/** Setup highlighting of default submit button on form field focus
+* @param HTMLElement
+*/
+function setupSubmitHighlight(parent) {
+	for (var key in { input: 1, select: 1, textarea: 1 }) {
+		var inputs = parent.getElementsByTagName(key);
+		for (var i = 0; i < inputs.length; i++) {
+			if (!/submit|image|file/.test(inputs[i].type)) {
+				addEvent(inputs[i], 'focus', inputFocus);
+				addEvent(inputs[i], 'blur', inputBlur);
+			}
+		}
+	}
+}
+
+/** Highlight default submit button
+* @this HTMLInputElement
+*/
+function inputFocus() {
+	var submit = findDefaultSubmit(this.form);
+	if (submit) {
+		submit.className += ' default';
+	}
+}
+
+/** Unhighlight default submit button
+* @this HTMLInputElement
+*/
+function inputBlur() {
+	var submit = findDefaultSubmit(this.form);
+	if (submit) {
+		submit.className = submit.className.replace(/ default( |$)/, '$1');
+	}
+}
+
+/** Find submit button used by Enter
+* @param HTMLFormElement
+* @return HTMLInputElement
+*/
+function findDefaultSubmit(form) {
+	var inputs = form.getElementsByTagName('input');
+	for (var i = 0; i < inputs.length; i++) {
+		var input = inputs[i];
+		if (input.type == 'submit') {
+			return input;
+		}
+	}
+}
+
+
+
+/** Add event listener
+* @param HTMLElement
+* @param string without 'on'
+* @param function
+*/
+function addEvent(el, action, handler) {
+	if (el.addEventListener) {
+		el.addEventListener(action, handler, false);
+	} else {
+		el.attachEvent('on' + action, handler);
+	}
+}
+
+/** Defer focusing element
+* @param HTMLElement
+*/
+function focus(el) {
+	setTimeout(function () { // this has to be an anonymous function because Firefox passes some arguments to setTimeout callback
+		el.focus();
+	}, 0);
+}
+
+/** Clone node and setup submit highlighting
+* @param HTMLElement
+* @return HTMLElement
+*/
+function cloneNode(el) {
+	var el2 = el.cloneNode(true);
+	setupSubmitHighlight(el2);
+	return el2;
+}