Highlight default submit button

This commit is contained in:
Jakub Vrana 2013-05-04 17:02:59 -07:00
parent 94a0cc8de8
commit b7021c9c7f
12 changed files with 102 additions and 13 deletions

View file

@ -157,7 +157,7 @@ foreach ($engines as $engine) {
<form action="" method="post" id="form">
<p>
<?php echo lang('Table name'); ?>: <input name="name" maxlength="64" value="<?php echo h($row["name"]); ?>" autocapitalize="off">
<?php if ($TABLE == "" && !$_POST) { ?><script type='text/javascript'>document.getElementById('form')['name'].focus();</script><?php } ?>
<?php if ($TABLE == "" && !$_POST) { ?><script type='text/javascript'>focus(document.getElementById('form')['name']);</script><?php } ?>
<?php echo ($engines ? html_select("Engine", array("" => "(" . lang('engine') . ")") + $engines, $row["Engine"]) : ""); ?>
<?php echo ($collations && !ereg("sqlite|mssql", $jush) ? html_select("Collation", array("" => "(" . lang('collation') . ")") + $collations, $row["Collation"]) : ""); ?>
<input type="submit" value="<?php echo lang('Save'); ?>">

View file

@ -62,7 +62,7 @@ echo ($_POST["add_x"] || strpos($name, "\n")
: '<input name="name" id="name" value="' . h($name) . '" maxlength="64" autocapitalize="off">'
) . "\n" . ($collations ? html_select("collation", array("" => "(" . lang('collation') . ")") + $collations, $collate) : "");
?>
<script type='text/javascript'>document.getElementById('name').focus();</script>
<script type='text/javascript'>focus(document.getElementById('name'));</script>
<input type="submit" value="<?php echo lang('Save'); ?>">
<?php
if (DB != "") {

View file

@ -122,7 +122,7 @@ if ($fields) {
}
}
echo ($update ? "<input type='submit' name='delete' value='" . lang('Delete') . "' onclick=\"return confirm('" . lang('Are you sure?') . "');\">\n"
: ($_POST || !$fields ? "" : "<script type='text/javascript'>document.getElementById('form').getElementsByTagName('td')[1].firstChild.focus();</script>\n")
: ($_POST || !$fields ? "" : "<script type='text/javascript'>focus(document.getElementById('form').getElementsByTagName('td')[1].firstChild);</script>\n")
);
if (isset($_GET["select"])) {
hidden_fields(array("check" => (array) $_POST["check"], "clone" => $_POST["clone"], "all" => $_POST["all"]));

View file

@ -78,7 +78,7 @@ class Adminer {
</table>
<script type="text/javascript">
var username = document.getElementById('username');
username.focus();
focus(username);
username.form['auth[driver]'].onchange();
</script>
<?php

View file

@ -98,5 +98,6 @@ function page_footer($missing = "") {
<div id="menu">
<?php $adminer->navigation($missing); ?>
</div>
<script type="text/javascript">setupSubmitHighlight(document);</script>
<?php
}

View file

@ -26,7 +26,7 @@ if (!$row) {
<form action="" method="post">
<p><input name="name" id="name" value="<?php echo h($row["name"]); ?>" autocapitalize="off">
<script type='text/javascript'>document.getElementById('name').focus();</script>
<script type='text/javascript'>focus(document.getElementById('name'));</script>
<input type="submit" value="<?php echo lang('Save'); ?>">
<?php
if ($_GET["ns"] != "") {

View file

@ -195,7 +195,7 @@ if ($_POST) {
}
textarea("query", $q, 20);
echo ($_POST ? "" : "<script type='text/javascript'>document.getElementsByTagName('textarea')[0].focus();</script>\n");
echo ($_POST ? "" : "<script type='text/javascript'>focus(document.getElementsByTagName('textarea')[0]);</script>\n");
echo "<p>" . (ini_bool("file_uploads")
? lang('File upload') . ': <input type="file" name="sql_file[]" multiple'
. ($_FILES && $_FILES["sql_file"]["error"][0] != 4 ? '' : ' onchange="this.form[\'only_errors\'].checked = true;"') // 4 - UPLOAD_ERR_NO_FILE

View file

@ -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; }

View file

@ -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;

View file

@ -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;
}

View file

@ -1,6 +1,7 @@
Adminer 3.7.0-dev:
Allow more SQL files to be uploaded at the same time
Print run time next to executed queries
Highlight default submit button
Disable SQL export when applying functions in select
Allow using lang() in plugins (customization)
Remove bzip2 compression support

View file

@ -49,7 +49,7 @@ class Adminer {
<tr><th><?php echo lang('Password'); ?><td><input type="password" name="auth[password]">
</table>
<script type="text/javascript">
document.getElementById('username').focus();
focus(document.getElementById('username'));
</script>
<?php
echo "<p><input type='submit' value='" . lang('Login') . "'>\n";