How to enable Form features
Interactive form validation
- Implement
WebCore/page/ValidationMessageClient.h
for your port - Set it to
PageClients::validationMessageClient
- Instantiate a
Page
object page->settings()->setInteractiveFormValidationEnabled(true)
Doing step 3 and 4 without step 1 and 2 enables a platform-neutral form validation UI. But it has some unresolvable bugs.
You should provide your ValidationMessageClient
.
input[type=number]
If you have never done anything for input[type=number], it lacks the following features:
- Spin button UI
- Number localization
Spin button UI
This is optional. Opera has similar UI, but IE10 has no spin button.
If you want the spin button UI, implement RenderTheme::adjustInnerSpinButtonStyle
and paintInnerSpinButtonStyle
.
Test: fast/forms/number/number-{appearance,spinbutton}*.html
Number localization
This is optional. IE10 localizes numbers, but Opera doesn't.
This feature requires Locale
class implementation. If your port is using WebCore/platform/text/LocaleNone.cpp
, this feature is disabled. Use WebCore/platform/text/{LocaleICU.cpp,mac/LocaleMac.mm,win/LocaleWin.cpp}
, or implement your own Locale class.
Test: fast/forms/number/number-l10n-input.html
input[type=color]
Enable ENABLE_INPUT_TYPE_COLOR
flag, and implement ChromeClient::createColorChooser
.
Date, datetime-local, month, time, week input types
WebCore provides a button UI to invoke platform-specific chooser for them.
- Enable
ENABLE_INPUT_TYPE_
FOO - Implement
Locale
class (See "Number localization" section) - Implement
ChromeClient::openDateTimeChooser
input[type=datetime]
Do not enable it. You can not make an appropriate UI with the current WebCore code.
Datalist element
This depends on input types.
Text field types
- Enable
ENABLE_DATALIST_ELEMENT
- Implement
RenderTheme::supportsDataListUI
so that it returns true for supported types. - In WebKit layer, hook keyboard input, focus, or touch events for a target text field, and show UI to choose values of
HTMLInputElement::dataList
.
Note: Discoverability of the datalist suggestions is bad. We should improve it.
Range type
- Enable
ENABLE_DATALIST_ELEMENT
- Implement
RenderTheme::supportsDataListUI
so that it returns true for range type. - Implement/override
RenderTheme::slideTickSnappingThreshold
,sliderTickSize
,sliderTickOffsetFromTrackCenter
.
Color type
- Enable
ENABLE_DATALIST_ELEMENT
- Implement
RenderTheme::supportsDataListUI
so that it returns true for color type. - Your
ColorChooser
implementation should respectColorChooserClient::shouldShowSuggestions
andsuggestions
.
Date, datetime-local, month, time, week types
- Enable
ENABLE_DATALIST_ELEMENT
- Implement
RenderTheme::supportsDataListUI
so that it returns true for supported types. - Implement
ChromeClient::openDateTimeChooser
so that it handlesDateTimeChooserParameters::suggestionValues
.
Attachments (3)
- multiple-fields-example.png (6.3 KB ) - added by 12 years ago.
- calendar-picker.png (28.4 KB ) - added by 12 years ago.
- chooser-only.png (5.2 KB ) - added by 12 years ago.
Download all attachments as: .zip