Помогни ни да направим Uroci.net по - богат! Добави урок

Как да си направите поле с ограничен брой символи? (JS + HTML)

nane008   трудност:    видян: 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>  



Регистрирайте се, за да добавите коментар


Калдейта ЕООД - © 2003-2010. Всички права запазени.
Препоръчваме: IT Новини