Vaadin TextField, который по умолчанию будет использовать только цифровую клавиатуру на iOS - PullRequest
Новая
       51

Vaadin TextField, который по умолчанию будет использовать только цифровую клавиатуру на iOS

0 голосов
/ 23 апреля 2019

Знаете ли вы, как настроить TextField, чтобы вместо обычной отображалась цифровая клавиатура (ср. Атрибут типа "число" в элементе ввода)? Пользователи находят раздражающим то, что им всегда приходится переключаться на цифровую клавиатуру для определенных полей (они должны заполняться несколько сотен раз в день!). Большинство связанных постов относятся к ограничению ввода цифрами, что не является проблемой.

Спасибо,

William

Ответы [ 3 ]

1 голос
/ 24 апреля 2019

Существует закрытая проблема 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");
});
1 голос
/ 23 апреля 2019

Для Ваадина:

Простое использование Числовое поле

Числовое поле: мобильный браузер показывает выделенные элементы управления вводом. Кнопки уменьшения и уменьшения значения могут отображаться дополнительно.

NumberField dollarField = new NumberField("Dollars");

См. документацию пример.

Для родной iOS:

Просто установите тип клавиатуры на NumberPad:

self.someTextField.keyboardType = UIKeyboardType.NumberPad

См. документацию для всех типов клавиатур.

0 голосов
/ 25 апреля 2019

Вместо встроенных компонентов / надстроек я нашел облегченное решение в одном из примеров из проекта archetype-application-example GitHub.

В итоге (только с использованием соответствующих частей):

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]);
                }
            }
        }
    }
}
...