如何顯示最大的單詞可以在PHP的文本區域輸入？

Question

我正在一個PHP表單中，我正在放置一個文本區域字段。最多500個字可以輸入到文本區域中。我用標籤顯示該值。

這裏我想要做的是，當用戶輸入到文本區域字段中輸入的總詞彙應該從最大單詞中減去，並且該值應該實時顯示。

例如，如果我有輸入文本「I」比最大話的價值應該得到改變爲499

那麼我怎樣才能執行。

Answer 1

HTML代碼

<textarea id="field"></textarea> 
<div id="charNum">0</div> 

jQuery代碼

$("#field").keyup(function(){ 
el = $(this); 
if(el.val().length >= 500){ 
    el.val(el.val().substr(0, 500)); 
} else { 
    $("#charNum").text(500-el.val().length); 
} 
}); 

工作實例 http://jsfiddle.net/vikastyagi87/xqyWV/255/

Answer 2

你應該用Javascript來做到這一點。 使用正則表達式計算到textarea中的空間數（一個空格=單詞）。 並顯示減法：maxWords-words

Answer 3

爲了每次用戶輸入字母時更新屏幕上的元素，您必須使用Javascript和HTML DOM的組合。

JQuery的簡化了一點：http://api.jquery.com/text/

你會需要捕獲打字與Javascript事件，這實際上是一個稍微複雜的文本區域。

看看這個線程的一些信息：Textarea onchange detection

Answer 4

要獲得的單詞數一個字符串使用此：

var string = "lorem ipsum dolor sit amet" 
    , words = string.match(/\w+/g) // ["lorem", "ipsum", ...] 
    , numberOfWords = words.length; // 5 

或者作爲一個班輪："lorem ipsum".match(/\w+/g).length;

您需要此項檢查加入到textarea的的onkeyup和onChange事件。

Answer 5

工作實例here

$(function() { 
    $("textarea").keypress(function() { 
     total_words = this.value.split(/[\s\.\?]+/).length;  
     $("p").html(500 - total_words); 
    }); 
}); 

Answer 6

你不需要Ajax來做到這一點。只需使用腳本的頁面上遠不如開銷，例如：

HTML：

<!-- create textarea and limit characters --> 
<textarea id="input" rows="4" cols="50" maxlength="500"> 
</textarea> 
<span id="output"></span> 

JS：

var maxWords = 500; 
var input = document.getElementById('input'); 
var output = document.getElementById('output'); 

output.innerHTML = maxWords + " words left"; 

input.onkeyup = function() { 
    var words = input.value.split(" "); // Convert string into words 
    var diff = maxWords - words.length; // Subtract words from maxWords 
    if (diff < 0) { // If words < maxWords prevent user from inputting more than maxWords 
     words.length = maxWords; // Remove words over limit 
     input.value = words.join(" "); // Fill input 
     diff = 0; 
    } 
    output.innerHTML = diff + " words left"; // Tell user new word count 
} 

http://jsfiddle.net/georeith/z2KfV/2/

這不考慮但是，語言的複雜性並假定任何空間都代表一個新詞。如果你想要它做這些事情，你將不得不看看使用正則表達式。

對於最大字符版本中看到：http://jsfiddle.net/georeith/z2KfV/4/

Answer 7

普萊舍試試這個:)

<?php $no_of_word = 500;?> 
<script> 
$(document).ready(function(){ 
    $('#wordcount').keyup(function(){ 
     var totalword = $(this).val().length; 
     if(totalword > <?php echo $no_of_word;?>){ 
      alert('Max word exceeded'); 
      $(this).attr('value',$(this).val().substr(0,<?php echo $no_of_word?>)); 
      $('#textrem').html(0); 
     }else{ 
      var remword = <?php echo $no_of_word;?> - totalword; 
      $('#textrem').html(remword); 
     } 
    }); 
}); 
</script> 

<label>No of word remaining</label> <span id='textrem'><?php echo $no_of_word?></span> 
<textarea id='wordcount'></textarea>