Zeigen Sie mit JavaScript, wie viele Zeichen in einem HTML-Textfeld verbleiben

Dies ist mein code:

function textCounter(field, countfield, maxlimit) {
    if (field.value.length > maxlimit) {
        field.value = field.value.substring(0, 160);
        field.blur();
        field.focus();
        return false;
    } else {
        countfield.value = maxlimit - field.value.length;
    }
}

Wie kann ich anzeigen lassen, wie viele Zeichen noch übrig sind von einem bestimmten Textfeld mit einem limit von 160?

InformationsquelleAutor der Frage ChristineS | 2012-10-05

javascript textarea

Den code in hier mit ein wenig änderung und Vereinfachung:

<input disabled  maxlength="3" size="3" value="10" id="counter">
<textarea onkeyup="textCounter(this,'counter',10);" id="message">
</textarea>
<script>
function textCounter(field,field2,maxlimit)
{
 var countfield = document.getElementById(field2);
 if ( field.value.length > maxlimit ) {
  field.value = field.value.substring( 0, maxlimit );
  return false;
 } else {
  countfield.value = maxlimit - field.value.length;
 }
}
</script>

Hoffe, das hilft!

Tipp:

Beim Zusammenführen des codes Ihrer Seite, stellen Sie sicher, dass die HTML-Elemente(textareainput) werden erst geladen, bevor die Skripte (Javascript-Funktionen)

InformationsquelleAutor der Antwort Nokia808Freak

Können Sie die bind-Taste drücken Sie die Veranstaltung mit Ihren Eingabe-Feld und false zurückgeben, wenn die Zeichen sind mehr als 160, wird das problem lösen jsfiddle

$('textarea').keypress(function(){

    if(this.value.length > 160){
        return false;
    }
    $("#remainingC").html("Remaining characters : " +(160 - this.value.length));
});

HTML

<textarea></textarea> <span id='remainingC'></span>

InformationsquelleAutor der Antwort Anoop

Einfach registrieren einen Eventhandler auf keydown Veranstaltungen und überprüfen Sie die Länge des input-Feldes an die Funktion und schreiben Sie es in ein separates element.

Sehen die demo.

var maxchar = 160;
var i = document.getElementById("textinput");
var c = document.getElementById("count");
c.innerHTML = maxchar;

i.addEventListener("keydown",count);

function count(e){
    var len =  i.value.length;
    if (len >= maxchar){
       e.preventDefault();
    } else{
       c.innerHTML = maxchar - len-1;   
    }
}

Sollten Sie die Länge auf Ihren server zu, denn Javascript könnte deaktiviert sein, oder der Benutzer etwas tun will böse Absicht.

InformationsquelleAutor der Antwort Christoph

1

Wie über diesen Ansatz teilt das problem in zwei Teile:
- Mit jQuery, zeigt es eine Dekrementieren Zähler unter der textareadie rot leuchtet, wenn es trifft die null, aber immer noch erlaubt dem Benutzer, zu geben.
- Verwende ich eine separate string-Länge validator (server-und client-Seite), um tatsächlich verhindern, dass die Einreichung des Formulars, wenn die Anzahl der chatacters in der textarea größer ist als 160.
Meine textarea hat eine id Messageund die span in denen ich die Anzeige der Anzahl der verbleibenden Zeichen hat eine id counter. Die css-Klasse error wird angewendet, wenn die Anzahl der verbleibenden Zeichen null schlägt.
```
var charactersAllowed = 160;

$(document).ready(function () {
    $('#Message').keyup(function () {
        var left = charactersAllowed - $(this).val().length;
        if (left < 0) {
            $('#counter').addClass('error');
            left = 0;
        }
        else {
            $('#counter').removeClass('error');
        }
        $('#counter').text('Characters left: ' + left);
    });
});
```
InformationsquelleAutor der Antwort Richard Everett

Versuchen Sie den folgenden code zum Beispiel:

funktionierenden code in jsfiddle.net

Für textArea verwenden:

<textarea id="txtBox"></textarea>
...
...

Für Textfeld, verwenden Sie diese:

<input type="text" id="txtBox"/>
<br>
<input type="text" id="counterBox"/>
<script>
 var txtBoxRef = document.querySelector("#txtBox");
 var counterRef = document.querySelector("#counterBox");
 txtBoxRef.addEventListener("keydown",function(){
  var remLength = 0;
  remLength = 160 - parseInt(txtBoxRef.value.length);
  if(remLength < 0)
   {
    txtBoxRef.value = txtBoxRef.value.substring(0, 160);
    return false;
   }
  counterRef.value = remLength + " characters remaining...";
 },true);
</script>

Hoffe, das Hilft!

InformationsquelleAutor der Antwort Nokia808Freak

Versuchen, diese

HTML

<textarea id="textarea" rows="8" cols="50" maxlength="100" ></textarea>
<div id="feedback"></div>

$(document).ready(function() {
        var max = 1000;
        $('#feedback').html(max + 'characters remaining');

        $('#textarea').keyup(function() {
            var text_length = $('#textarea').val().length;
            var text_remaining = max - text_length;

            $('#feedback').html(text_remaining + ' characters remaining');
        });
    });

InformationsquelleAutor der Antwort Manjunath Akalawadi

versuchen, diesen code hier...dies ist mit javascript onKeyUp () - Funktion...

<script>
function toCount(entrance,exit,text,characters) {  
var entranceObj=document.getElementById(entrance);  
var exitObj=document.getElementById(exit);  
var length=characters - entranceObj.value.length;  
if(length <= 0) {  
length=0;  
text='<span class="disable"> '+text+' <\/span>';  
entranceObj.value=entranceObj.value.substr(0,characters);  
}  
exitObj.innerHTML = text.replace("{CHAR}",length);  
}
</script>

textarea counter demo

InformationsquelleAutor der Antwort Lucky

Brauchte ich so etwas wie, und die Lösung gab ich mit Hilfe von jquery ist dies:

<textarea class="textlimited" data-textcounterid="counter1" maxlength="30">text</textarea>
<span class='textcounter' id="counter1"></span>

Mit diesem script:

//the selector below will catch the keyup events of elements decorated with class textlimited and have a maxlength
$('.textlimited[maxlength]').keyup(function(){
     //get the fields limit
    var maxLength = $(this).attr("maxlength");

    //check if the limit is passed
    if(this.value.length > maxLength){
        return false;
    }

    //find the counter element by the id specified in the source input element
    var counterElement = $(".textcounter#" + $(this).data("textcounterid"));
    //update counter 's text
    counterElement.html((maxLength - this.value.length) + " chars left");
});

Α live-demo Hier

InformationsquelleAutor der Antwort cnom

HTML:

 <form>
  <textarea id='text' maxlength='10'></textarea>
  <div id='msg'>10 characters left</div>
  <div id='lastChar'></div>
</form>

JS:

function charCount() {
  var textEntered = document.getElementById('text').value;
  var msg = document.getElementById('msg');
  var counter = (10-(textEntered.length));
  msg.textContent = counter+' characters left';
}

var el = document.getElementById('text');
el.addEventListener('keyup',charCount,false);

InformationsquelleAutor der Antwort Gleb Umarov

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.