Vaadin TextField 仅在 iOS 上默认为数字键盘

Question

您是否知道设置 TextField 以便显示数字键盘而不是常规键盘的方法（参见输入元素中的类型属性 "number"）？用户发现某些字段总是必须切换到数字键盘很烦人（这些字段每天必须填写数百次！）。大多数相关帖子都涉及将输入限制为数字，这不是问题。

谢谢，

威廉

Answer 1

对于 Vaadin：

只需使用数字字段

数字字段：移动浏览器显示专用输入控件。可以选择显示值的减少和增加按钮。

NumberField dollarField = new NumberField("Dollars");

参见 documentation 示例。

原生 iOS:

只需将键盘类型设置为 NumberPad:

self.someTextField.keyboardType = UIKeyboardType.NumberPad

查看所有键盘类型的 documentation。

Answer 2

关于此 here 有一个已解决的 github 问题，但我不确定那里提到的广告位现在应该如何工作。如果现在没有下面的解决方法就可以做到这一点，请随时告诉我。

据我所知，将属性 type="number" 添加到 <vaadin-text-field> 不起作用，因为该属性应该在实际的 <input> 元素上。

有一个解决方法：https://github.com/Artur-/vaadin-examples/blob/master/example-textfield-type/src/main/java/org/vaadin/artur/MainView.java#L42

TextField textfield = new TextField("Number Input");
textField.getElement().getNode().runWhenAttached(ui -> {
    ui.getPage().executeJavaScript("[=10=].focusElement.type=", textField, "number");
});

Answer 3

代替内置组件/附加组件，我在 archetype-application-example GitHub 项目的 one of the samples 中找到了一个轻量级解决方案。

总结（仅使用相关部分）：

NumberTypeField.java:

package com.example;

import com.vaadin.data.util.converter.StringToIntegerConverter;
import com.vaadin.ui.TextField;

/**
 * A field for entering numbers. On touch devices, a numeric keyboard is shown
 * instead of the normal one.
 */
public class NumberTypeField extends TextField {
    public NumberTypeField() {
        // Mark the field as numeric.
        // This affects the virtual keyboard shown on mobile devices.
        AttributeExtension ae = new AttributeExtension();
        ae.extend(this);
        ae.setAttribute("type", "number");
    }

    public NumberTypeField(String caption) {
        this();
        setCaption(caption);
    }
}

AttributeExtension.java:

package com.example;

import com.vaadin.annotations.JavaScript;
import com.vaadin.server.AbstractJavaScriptExtension;
import com.vaadin.ui.TextField;

/**
 * A JavaScript extension for adding arbitrary HTML attributes for components.
 */
@JavaScript("attribute_extension_connector.js")
public class AttributeExtension extends AbstractJavaScriptExtension {

private static final long serialVersionUID = 1L;

public void extend(TextField target) {
    super.extend(target);
}

@Override
protected AttributeExtensionState getState() {
    return (AttributeExtensionState) super.getState();
}

public void setAttribute(String attribute, String value) {
    getState().attributes.put(attribute, value);
}

AttributeExtensionState.java:

package com.example;

import com.vaadin.shared.JavaScriptExtensionState;

import java.util.HashMap;

/**
 * Shared state class for {@link AttributeExtension} communication from server
 * to client.
 */
public class AttributeExtensionState extends JavaScriptExtensionState {

    private static final long serialVersionUID = 1L;

    public HashMap<String, String> attributes = new HashMap<String, String>();
}

attribute_extension_connector.js（放在同一个源文件夹中，例如，com.example）：

window.com_example_AttributeExtension = function() {

    this.onStateChange = function() {
        var element = this.getElement(this.getParentId());
        if (element) {
            var attributes = this.getState().attributes;
            for (var attr in attributes) {
                if (attributes.hasOwnProperty(attr)) {
                    element.setAttribute(attr, attributes[attr]);
                }
            }
        }
    }
}

Vaadin TextField 仅在 iOS 上默认为数字键盘

Vaadin TextField that will only default to numeric keyboard on iOS

textfield

vaadin

ios