yii2-twbsmaxlength-widget Wrapper for the Bootstrap Maxlength plugin, a visual feedback indicator for the maxlength attribute

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

1 0
2 followers
0 downloads
Yii Version: 2.0
License: BSD-2-Clause
Category: User Interface
Developed by: Raoul
Created on: Jul 14, 2015
Last updated: 9 years ago

Related Extensions