Сколько символов осталось progress-bar для INPUT / Формы / Сниппеты Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.0.1

Каталог: Сниппеты Bootstrap

Категория: Формы

Для Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Русский

Уникальный ID: 138

Количество символов:

Посмотрели: 2262 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 3.8 / 5 - 9 голосов

Тип лицензии: CC BY 4.0

Авторство: bootstraptema.ru

Информация: Пользователям

Информация: Правообладателям

Теги: Snippet, поле, input, Progress, Ввод, Bootstrap, бутстрап

Поделился: BootstrapТема

Добавлено: 2015-11-30 в 17:06

Метка: 1582173241

⇄ ⇅

<link rel="stylesheet" href="https://bootstraptema.ru/plugins/2015/b-v3-3-6/bootstrap.min.css" />
<script type="text/javascript" src="https://bootstraptema.ru/plugins/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://bootstraptema.ru/plugins/2015/b-v3-3-6/bootstrap.min.js"></script>

<style>
body{background:rgb(165,132,202)}
</style>

<div class="container"><div class="row">
<div class="col-lg-6 col-lg-offset-3 well">

<div class="progress" id="barbox">
 <div id="bar" class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
 aria-valuenow="0" aria-valuemin="0" aria-valuemax="156">
<span id="count">156</span>
 </div>
</div>
<input id="contentbox" class="form-control" />
</div>
</div></div>

<script>
$(document).ready(function()
{
$("#contentbox").keyup(function()
{
var box=$(this).val();
var main = box.length *100;
var value= (main / 145);
var count= 145 - box.length;
if(box.length <= 145)
{
$('#count').html(count);
$('#bar').animate(
{
"width": value+'%',
}, 1);
}
else
{
$('#bar').attr({ class: 'progress-bar progress-bar-danger progress-bar-striped' }); 
}
return false;
});

});
</script>