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("$0.focusElement.type=$1", 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上默认为数字键盘

3 个答案: