Документация / Виджеты /

Числовое поле

ZForms.Widget → ZForms.Widget.Text → ZForms.Widget.Text.Number

Виджет для числового поля создается на основе элемента <input type="text" />.

Виджет позволяет вводить только числа, а также знаки «-», «,», «.» (в зависимости от дополнительных параметров).

Определение виджета

Виджет определяется по дополнительному CSS-классу zf-number — <input class="zf zf-number" />.

Параметры инициализации

oOptions : {
	String  sPlaceHolder : '',
	Boolean bFloat       : false,
	Boolean bNegative    : false,
	Boolean bFocusOnInit : false
	}

Где:

  • sPlaceHolder — параметр, определяющий плэйсхолдер, который будет подставляться в поле в том случае, если оно пустое.
  • bFloat — параметр, определяющий, можно ли вводить в поле дробные числа.
  • bNegative — параметр, определяющий, можно ли вводить в поле отрицательные числа.
  • bFocusOnInit — параметр, позволяющий установить фокус на это поле при инициализации формы.

Поддерживаемые зависимости

Пример

Код примера

<form class="zf" action=".">
	<dl> <!-- oClassElement -->
		<dt><label for="input-number">Число</label></dt>
		<dd><input class="zf zf-number" type="text" name="number" id="input-number" /></dd>
	</dl>
	<dl> <!-- oClassElement -->
		<dt><label for="input-number-float">Дробное число с&#160;плэйсхолдером</label></dt>
		<dd><input class="zf zf-number" type="text" name="number-float" id="input-number-float" onclick="return { oOptions : { bFloat : true, sPlaceHolder : 'Налоговая ставка' } }" /></dd>
	</dl>
	<dl> <!-- oClassElement -->
		<dt><label for="input-number-negative">Отрицательное число</label></dt>
		<dd><input class="zf zf-number" type="text" name="number-negative" id="input-number-negative" onclick="return { oOptions : { bNegative : true } }" /></dd>
	</dl>
</form>