yii2-twbsmaxlength-widget ¶

1. Installation
2. Basic Usage
3. ActiveForm
4. Resources

The TwbsMaxlength widget is a wrapper for the great Bootstrap Maxlength plugin, a visual feedback indicator for the maxlength attribute. Have a look to the demo page for more !

Installation ¶

The preferred way to install this extension is through composer.

Either run

php composer.phar require --prefer-dist raoul2000/yii2-twbsmaxlength-widget "*"

or add

"raoul2000/yii2-twbsmaxlength-widget": "*"

to the require section of your composer.json file.

Basic Usage ¶

Using TwbsMaxlength widget is easy. In the example below, we are attaching the "Bootstrap Maxlength" plugin to an input text control, with a maximum length of 20 characters set by the maxlength HTML5 attribute :

[html]
<input type="text" class="form-control" id="txtinput1" name="xyz" maxlength="20" />

<?php
	raoul2000\widget\twbsmaxlength\TwbsMaxlength::widget(['selector' => '#txtinput1']);
?>

The user will not be able to enter more than 20 characters in the text input control. After the 10th character (hard coded default) is entered by the user, a small alert will appear at the bottom of the control.

Remember to use the selector option only when you need to attach the "Bootstrap Maxlength" plugin to an existing HTML input tag (text or textarea).

ActiveForm ¶

Most of the time, a text or textarea input control is produced by an ActiveForm widget. The TwbsMaxlength is of course also able to handle such use case.

<?php 
	use raoul2000\widget\twbsmaxlength\TwbsMaxlength;
	
	$form = ActiveForm::begin(); 

	echo $form->field($model, 'name')
		->textInput(['maxlength' => true])		
		->widget(TwbsMaxlength::className());

	ActiveForm::end();
?>

The code above only works since Yii2 v2.0.3 which includes a feature to automatically set the maxlength attribute of an ActiveField textInput based on the related string validation rule (Read more...)

To use it with a textarea, simply add the typeconfiguration parameter with value TwbsMaxlength::INPUT_TEXTAREA :

<?php 
	use raoul2000\widget\twbsmaxlength\TwbsMaxlength;
	
	$form = ActiveForm::begin(); 

	echo $form->field($model, 'name')
		->textInput(['maxlength' => true])		
		->widget(TwbsMaxlength::className(),['type' => TwbsMaxlength::INPUT_TEXTAREA]);

	ActiveForm::end();
?>

Resources ¶

• Github
• Try out a demo