Други уроци
Adobe Photoshop
Adobe Illustrator
Adobe Flash
Adobe Fireworks
DreamWeaver
CSS и HTML
Corel Draw
Image Ready
PHP
SEO
CMS
Microsoft Windows
Microsoft Word
Microsoft Excel
PowerPoint
Microsoft Access
Microsoft Publisher
Linux
Visual basic
JavaScript
Ajax
3ds Max
Maya 3D
C++
Sound Forge
Gimp
SWiSH
.jpg_(uroci.net).jpg)
Как да си направите поле с ограничен брой символи? (JS + HTML)
видян: 59934
Вече знаете темата на урока, така че да започваме.
Първо трябва да си създадете HTML файл например "index.html". В него въведете този текст:
<html>
<head>
<title>Test</title>
</head>
<body>
<input id = "here">
<p id = "ostavat"></p>
</body>
<script>
</script>
</html>
Полето с id "here" ще бъде полето, в което ще се въвеждат символи, а "ostavat" ще съдържа оставащите символи. Сега ще ни трябва скрипт.
var max = 30; // Може да редактирате на колкото символа максимум искате да се въвеждат
var value = document.getElementById("here").value; // Получава стойността на полето
var length = value.length; // Получава колко символа са въведени в полето
Това ще ви бъдат променливите, които трябва да сложите в тагът за скрипт.
Ще ви трябва и една функция.
var update = function()
{
document.getElementById("ostavat").innerHTML = max - length; // Слага оставащите символи в тага <p>
if(length>max) // Проверява да не си надвишил лимита
{
document.getElementById("here").value = value.substring(0,max); // Прави в полето да останат само символите от 0 до максималната стойнтост и изтрива всички останали
}
value = document.getElementById("here").value;// Обновява данните за полето
length = value.length;
setTimeout(update, 10); // Вика функцията отново през 10 милисекунди
}
Ето и крайният резултат:
<html>
<head>
<title>Test</title>
</head>
<body>
<input id = "here">
<p id = "ostavat"></p>
</body>
<script>
var max = 30; // Може да редактирате на колкото символа максимум искате да се въвеждат
var value = document.getElementById("here").value; // Получава стойността на полето
var length = value.length; // Получава колко символа са въведени в полето
var update = function()
{
document.getElementById("ostavat").innerHTML = max - length; // Слага оставащите символи в тага <p>
if(length>max) // Проверява да не си надвишил лимита
{
document.getElementById("here").value = value.substring(0,max); // Прави в полето да останат само символите от 0 до максималната стойнтост и изтрива всички останали
}
value = document.getElementById("here").value;// Обновява данните за полето
length = value.length;
setTimeout(update, 10); // Вика функцията отново през 10 милисекунди
}
</script>
</html>