Ogranicz liczbę znaków dozwolonych w polu tekstowym formularza

115

Jak ograniczyć lub ograniczyć wpisywanie przez użytkownika maksymalnie pięciu znaków w polu tekstowym?

Poniżej znajduje się pole wprowadzania jako część mojego formularza:

<input type="text" id="sessionNo" name="sessionNum" />

Czy używa czegoś takiego jak maxSize czy coś takiego?

BruceyBandit
źródło
16
Tutaj <input type="text" maxlength="5"> demo na żywo: jsfiddle.net/mcBbW/1
Šime Vidas,

Odpowiedzi:

174

maksymalna długość :

Maksymalna liczba znaków, które zostaną zaakceptowane jako dane wejściowe. Może to być większe niż określone przez SIZE, w którym to przypadku pole będzie odpowiednio przewijać. Wartość domyślna jest nieograniczona.

<input type="text" maxlength="2" id="sessionNo" name="sessionNum" onkeypress="return isNumberKey(event)" />

Jednak przewodnik może mieć na to wpływ, ale nie musi. Konieczne może być również użycie lub dodanie innej funkcji obsługi, aby przetestować długość.

Jared Farrish
źródło
Uznałem, że ta odpowiedź jest przydatna podczas ograniczania w fazie wprowadzania. Możesz również ograniczyć to w fazie walidacji podczas przesyłania i wyświetlić komunikat walidacji za pomocą patternatrybutu. Zobacz stackoverflow.com/questions/10281962/…
31

Najprostszy sposób na to:

maxlength="5"

A więc ... Dodanie tego atrybutu do kontrolki:

<input type="text" 
    id="sessionNo" 
    name="sessionNum" 
    onkeypress="return isNumberKey(event)" 
    maxlength="5" />
Nonym
źródło
8

Dodaj do nagłówka:

<script language="javascript" type="text/javascript">
function limitText(limitField, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    }
}
</script>

    <input type="text" id="sessionNo" name="sessionNum" onKeyDown="limitText(this,5);" 
onKeyUp="limitText(this,5);"" />
b3verelabs
źródło
this.form.sessionNowydaje się trochę podejrzana. Dlaczego nie po prostu this? A także, limitCounta limitNumtakże wydaje się niesprawne / niepotrzebne?
Jared Farrish,
1
Poprawiłem to. Jeśli chcesz ograniczyć to do określonych znaków lub cyfr, możesz to zrobić, ale jeśli nie dbasz o to, maksymalna długość będzie działać dobrze. Powiedz więc, że jeśli chcesz, aby wartości
mieściły
this.form.sessionNonadal nie wydaje się w porządku. thisw tym kontekście wskaże input, nie document.
Jared Farrish
Wciąż nie w porządku, nie odnosi się do formobu. thisto wszystko czego potrzebujesz. Ponadto, technicznie rzecz biorąc, gdybyś chciał odwołać się do elementu za pomocą elementu form, byłoby to przez ( form/ input) name, a nie id, tj document.formName.sessionNum. : .
Jared Farrish,
Prawidłowo wpisałem zbyt szybko, że wcześniej był zawinięty w formularzu. Ale po prostu przekażesz ref do danych wejściowych do funkcji, aby uzyskać bieżącą wartość pola, a następnie dodaj dowolną logikę, którą chcesz ograniczyć to pole.
b3verelabs
8

Według w3c domyślną wartością atrybutu MAXLENGTH jest nieograniczona liczba. Jeśli więc nie określisz maksymalnej wartości, użytkownik może kilka razy wyciąć i wkleić Biblię i umieścić ją w formularzu.

Nawet jeśli określisz MAXLENGTH na rozsądną liczbę, upewnij się, że dokładnie sprawdziłeś długość przesłanych danych na serwerze przed przetworzeniem (używając czegoś takiego jak php lub asp), ponieważ i tak jest dość łatwo ominąć podstawowe ograniczenie MAXLENGTH

Mahdi Jazini
źródło
1
@lopezdp, istnieje wiele sposobów „obejścia” ograniczeń HTML / JavaScript. Najłatwiej jest to sprawdzić, otwierając stronę w Chrome, „sprawdź element” i ręcznie zmodyfikuj kod HTML. Bardziej rozbudowany sposób obejścia - napisz skrypt, który będzie publikował dane ignorując wszelkie ograniczenia (używając biblioteki curl lub czegoś podobnego). Jako programista backendu nigdy nie powinieneś ufać weryfikacji danych przez frontend - wszystkie reguły powinny być zduplikowane na serwerze. Walidacja frontendu to tylko sposób na zaoszczędzenie czasu użytkownika poprzez wskazywanie oczywistych błędów bez wysyłania żądania do serwera.
Val Petruchek
4
<input type="text" maxlength="5">

maksymalna liczba liter, które można wprowadzić, to 5.

anonimowy
źródło
4

Uprość to

<input type="text" maxlength="3" />

i użyj alertu, aby pokazać, że użyto maksymalnej liczby znaków.

user5829707
źródło
3

Zawsze robię to tak:

$(document).ready(function(){
var maxChars = $("#sessionNum");
var max_length = maxChars.attr('maxlength');
if (max_length > 0) {
    maxChars.bind('keyup', function(e){
        length = new Number(maxChars.val().length);
        counter = max_length-length;
        $("#sessionNum_counter").text(counter);
    });
}
});

Wejście:

<input name="sessionNum" id="sessionNum" maxlength="5" type="text">
Number of chars: <span id="sessionNum_counter">5</span>
Sašo Krajnc
źródło
2

Maksymalna długość

Maksymalna liczba znaków, które zostaną zaakceptowane jako dane wejściowe. Atrybut maxlength określa maksymalną liczbę znaków dozwolonych w elemencie.

Szkoły Maxlength W3

<form action="/action_page.php">
    Username: <input type="text" name="usrname" maxlength="5"><br>
    <input type="submit" value="Submit">
</form>
Kondal
źródło
1

Możesz użyć <input type = "text" maxlength="9"> lub

<input type = "number" maxlength="9">dla numerów lub <input type = "email" maxlength="9">do weryfikacji adresu e-mail pojawi się

BKas Development
źródło
1
<input type="number" id="xxx" name="xxx" oninput="maxLengthCheck(this)" maxlength="10">

function maxLengthCheck(object) {
  if (object.value.length > object.maxLength)
  object.value = object.value.slice(0, object.maxLength)
}
P.Banerjee
źródło
0

Użyj maxlenght = "liczba znaków"

<input type="text" id="sessionNo" name="sessionNum" maxlenght="7" />
Rahul Jain
źródło
0

Poniższy kod zawiera zliczane ...

var count = 1;

do {
    function count_down(obj, count){

    let element = document.getElementById('count'+ count);

    element.innerHTML = 80 - obj.value.length;

    if(80 - obj.value.length < 5){
        element.style.color = "firebrick";
    }else{
        element.style.color = "#333";
    }
}
count++;
} while (count < 20); 
.text-input {
    padding: 8px 16px;
    width: 50%;
    margin-bottom: 5px;
    margin-top: 10px;
    font-size: 20px;
    font-weight: 700;
    font-family: Raleway;
    border: 1px solid dodgerblue;
  }
<p><input placeholder="Title" id="bike-input-title" onkeyup="count_down(this, 3)" maxlength="80"  class="text-input" name="bikeTitle" ></p>
        <span id="count3" style="float: right; font-family: Raleway; font-size:20px; font-weight:600; margin-top:-5px;">80</span><br>

Eric Coetzee
źródło
-1
<input type="text" name="MobileNumber" id="MobileNumber" maxlength="10" onkeypress="checkNumber(event);"  placeholder="MobileNumber">

<script>
function checkNumber(key) {
  console.log(key);
  var inputNumber = document.querySelector("#MobileNumber").value;
  if(key.key >= 0 && key.key <= 9) {
    inputNumber += key.key;
  }
  else {
    key.preventDefault();
  }
}
</script>
Yash Patel
źródło