Changeset:
8fe051e7e468
https://sourceforge.net/p/mrbs/hg-code/ci/8fe051e7e4688c3b4e9a6e3dfc3bf87ea3dd278c
Author:
Campbell Morrison <[email protected]>
Date:
Wed Jul 13 16:20:57 2016 +0100
Log message:
Fixed problem with Chrome not showing datalist options (see SF bugs #360).
diffstat:
web/functions.inc | 22 +++++++++-----
web/js/general.js.php | 77 ++++++++++++++++++++++++++++++++++++++------------
2 files changed, 72 insertions(+), 27 deletions(-)
diffs (138 lines):
diff -r 6e7516dc0671 -r 8fe051e7e468 web/functions.inc
--- a/web/functions.inc Thu Jul 07 16:43:44 2016 +0100
+++ b/web/functions.inc Wed Jul 13 16:20:57 2016 +0100
@@ -1354,6 +1354,7 @@
$html .= (empty($params['label_title'])) ? '' : ' title="' .
htmlspecialchars($params['label_title']) . '"';
$html .= ">" . $params['label'] . "</label>\n";
}
+
$html .= "<input id=\"" . $params['id'] . "\" name=\"" . $params['name'] .
"\"";
$html .= " list=\"" . $params['id'] . "_options\"";
$html .= " value=\"" . $params['value'] . "\"";
@@ -1361,14 +1362,19 @@
$html .= (isset($params['pattern'])) ? " pattern=\"" .
htmlspecialchars($params['pattern']) . "\"" : "";
$html .= ($params['mandatory']) ? " required aria-required=\"true\"" : "";
$html .= (isset($params['attributes'])) ? " " . $params['attributes'] : "";
- // We normally have the autocomplete atribute set to off because in most
browsers
- // this stops the browser suggesting previous input and confines the list to
our
- // options. However in Opera turning off autocomplete turns off our
options as
- // well, so we have to turn it on. (We'll also turn it on for Opera in the
JavaScript,
- // for good measure, just in case the server isn't passing through the user
agent).
- $html .= " autocomplete=\"";
- $html .= (strpos(utf8_strtolower($HTTP_USER_AGENT), 'opera') === FALSE) ?
'off' : 'on';
- $html .= "\">\n";
+ $html .= ">\n";
+
+ // One problem with using a datalist with an input element is the way
different browsers
+ // handle autocomplete. If you have autocomplete on, and also an id or name
attribute, then some
+ // browsers, eg Edge, will bring the history up on top of the datalist
options so that you can't
+ // see the first few options. But if you have autocomplete off, then other
browsers, eg Chrome,
+ // will not present the datalist options at all. This can be fixed in
JavaScript by having a second,
+ // hidden, input which holds the actual form value and mirrors the visible
input. Because we can't
+ // rely on JavaScript being enabled we will create the basic HTML using
autocomplete on, ie the default,
+ // which is the least bad alternative. One disadvantage of this method is
that the label is no longer
+ // tied to the visible input, but this isn't as important for a text input
as it is, say, for a checkbox
+ // or radio button.
+
$html .= "<datalist id=\"" . $params['id'] . "_options\">";
// Put a <select> wrapper around the options so that browsers that don't
diff -r 6e7516dc0671 -r 8fe051e7e468 web/js/general.js.php
--- a/web/js/general.js.php Thu Jul 07 16:43:44 2016 +0100
+++ b/web/js/general.js.php Wed Jul 13 16:20:57 2016 +0100
@@ -205,30 +205,67 @@
});
});
-
- <?php
- // Add jQuery UI Autocomplete functionality for those browsers that do not
- // support the <datalist> element. (We don't support autocomplete in IE6 and
- // below because the browser doesn't render the autocomplete box properly -
it
- // gets hidden behind other elements. Although there are fixes for this,
- // it's not worth it ...)
- ?>
- if (supportsDatalist() || lteIE6)
+ if (supportsDatalist())
{
<?php
- // If the browser does support the datalist we have to do a bit of tweaking
- // if we are running Opera. We normally have the autocomplete atribute set
- // to off because in most browsers this stops the browser suggesting
previous
- // input and confines the list to our options. However in Opera turning
off
- // autocomplete turns off our options as well, so we have to turn it back
on.
+ // One problem with using a datalist with an input element is the way
different browsers
+ // handle autocomplete. If you have autocomplete on, and also an id or
name attribute, then some
+ // browsers, eg Edge, will bring the history up on top of the datalist
options so that you can't
+ // see the first few options. But if you have autocomplete off, then
other browsers, eg Chrome,
+ // will not present the datalist options at all. We fix this in
JavaScript by having a second,
+ // hidden, input which holds the actual form value and mirrors the visible
input. Because we can't
+ // rely on JavaScript being enabled we will create the basic HTML using
autocomplete on, ie the default,
+ // which is the least bad alternative. One disadvantage of this method is
that the label is no longer
+ // tied to the visible input, but this isn't as important for a text input
as it is, say, for a checkbox
+ // or radio button.
?>
- if (navigator.userAgent.toLowerCase().indexOf('opera') >= 0)
- {
- $('datalist').prev().attr('autocomplete', 'on');
- }
+ $('input[list]').each(function() {
+ var input = $(this),
+ hiddenInput = $('<input type="hidden">');
+
+ <?php
+ // Create a hidden input with the id, name and value of the original
input. Then remove the id and
+ // name from the original input (so that history doesn't work).
Finally make sure that
+ // the hidden input is updated whenever the original input is changed.
+ ?>
+ hiddenInput.attr('id', input.attr('id'))
+ .attr('name', input.attr('name'))
+ .val(input.val());
+
+ input.removeAttr('id')
+ .removeAttr('name')
+ .after(hiddenInput);
+
+ input.change(function() {
+ hiddenInput.val($(this).val());
+ })
+
+ });
+
+ <?php
+ // Because there are some browsers, eg MSIE and Edge, that will still give
you form history even
+ // though the input has no id or name, then we need to clear the values
from those inputs just
+ // before the form is submitted. Note that we can't do it on the submit
event because by that time
+ // the browser has cached the values. So we do it when the Submit button
is clicked - and this event
+ // is also triggered if Enter is entered into an input field.
+ ?>
+ $('form:has(input[list]) input[type="submit"]').click(function() {
+ $(this).closest('form')
+ .find('input:not([name])')
+ .not('input[type="submit"]')
+ .val('');
+ });
+
}
- else
+ else if (!lteIE6)
{
+ <?php
+ // Add jQuery UI Autocomplete functionality for those browsers that do not
+ // support the <datalist> element. (We don't support autocomplete in IE6
and
+ // below because the browser doesn't render the autocomplete box properly
- it
+ // gets hidden behind other elements. Although there are fixes for this,
+ // it's not worth it ...)
+ ?>
$('datalist').each(function() {
var datalist = $(this);
var options = [];
@@ -277,6 +314,8 @@
});
}
+
+
$('#Form1 input[type="submit"]').css('visibility', 'visible');
------------------------------------------------------------------------------
What NetFlow Analyzer can do for you? Monitors network bandwidth and traffic
patterns at an interface-level. Reveals which users, apps, and protocols are
consuming the most bandwidth. Provides multi-vendor support for NetFlow,
J-Flow, sFlow and other flows. Make informed decisions using capacity planning
reports.http://sdm.link/zohodev2dev
_______________________________________________
Mrbs-commits mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/mrbs-commits
