在没有 javascript 的输入类型="number" 上禁用箭头

Question

<input type="number"> 字段显示 up/down 箭头 (increment/decrement)，如何在不使用 javascript 的情况下删除这些（在 Drupal 8 中）？

一位客户要求删除 up/down 箭头以防止意外更改值。我尝试添加一个使用 $element['#type'] = 'textfield'; 的自定义字段小部件。

这会在更改值时导致错误，因为 Drupal 需要一个整数，但自定义字段小部件提供的是一个字符串。

所以我正在寻找一种方法（可能是 hook_form_alter）来更改显示（删除 up/down 箭头）而不更改输出（int vs string）。

下面是我的自定义字段小部件的代码。

<?php

namespace Drupal\fieldwidgets\Plugin\Field\FieldWidget;

use Drupal\Core\Field\FieldItemListInterface;
use Drupal\Core\Field\Plugin\Field\FieldWidget\StringTextareaWidget;
use Drupal\Core\Form\FormStateInterface;
use Symfony\Component\Validator\ConstraintViolationInterface;

/**
 * Plugin implementation of the 'number No Increment' widget.
 *
 * @FieldWidget(
 *   id = "number_no_increment",
 *   label = @Translation("Number without -+ buttons"),
 *   field_types = {
 *     "decimal",
 *     "integer",
 *   }
 * )
 */
class NumberNoIncrementWidget extends StringTextareaWidget {

  /**
   * {@inheritdoc}
   */
  public function settingsForm(array $form, FormStateInterface $form_state) {
    $element = parent::settingsForm($form, $form_state);
    $element['rows']['#description'] = $this->t('Number widget without increment buttons.');

    return $element;
  }

  /**
   * {@inheritdoc}
   */
  public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
    $main_widget = parent::formElement($items, $delta, $element, $form, $form_state);
    $element = $main_widget['value'];
    $element['#default_value'] = (isset($items[$delta]->value) && isset($countries[$items[$delta]->value])) ? $items[$delta]->value : NULL;
    $element['#type'] = 'textfield';
    $element['#format'] = $items[$delta]->format;
    $element['#base_type'] = $main_widget['value']['#type'];

    return $element;
  }

  /**
   * {@inheritdoc}
   */
  public function errorElement(array $element, ConstraintViolationInterface $violation, array $form, FormStateInterface $form_state) {
    if ($violation->arrayPropertyPath == ['format'] && isset($element['format']['#access']) && !$element['format']['#access']) {
      // Ignore validation errors for formats if formats may not be changed.
      return FALSE;
    }
    return $element;
  }

}

Answer 1

您想扩展 StringTextfieldWidget class，而不是 StringTextareaWidget。

那么你需要一个验证方法：

public static function validate($element, FormStateInterface $form_state) {
  $value = $element['#value'];
  if (!is_numeric($value)) {
    $form_state->setError($element, t('%field should be a number.', ['%field' => $element['#title']]));
  }
}

在 fomElement 方法中引用此验证器：

'#element_validate' => [
  [static::class, 'validate'],
]

此外，如果您必须在数据库中存储一个整数（例如，我的意思不是 varchar），您将需要在验证回调中转换该值，因为 is_numeric() 允许数字字符串。

在没有 javascript 的输入类型="number" 上禁用箭头

Disable Arrows on input type="number" without javascript

html

php

drupal

drupal-fapi

drupal-8