動的統計textareaボックス文字数jsコードの深い研究
今日ある本でテキストドメインをどのように動的に統計するかに関するjsコードを見て、いくつかの小さなバグを発見して、その不完全なところに対して適切な修正をしました.
元htmlコードは以下の通りです.
元のjsコードは以下の通りです.
ページ上でこのコードを実行すると、ユーザがテキストフィールドにキーボードで文字を打ち込む(onkeydownおよびonkeyupイベントがトリガーされる)と、現在入力バイト数と残りのバイト数が動的に統計されるが、ユーザが大きなテキストを右クリックで貼り付けることでテキストフィールドに文字を貼り付けると、統計データは変化しない.
追加onchangeイベントで再試行
htmlコードは以下の通りです.
問題が依然として解決していないことを発見して、このようにして、カーソルの焦点がテキストドメインを移動する時だけやっと再統計することができます.
最後にネット上でgoogleはtextareaにもう一つのonpropertychange事件があることを発見して、ネット上の解釈を見て、もとはこの事件はonchange事件と本質的な違いがあって、onpropertychange事件はコントロールの中の内容が変わるとすぐに事件を触発するのです.
今になってやっとこんなに強い事件があることに気づいて、自然にonkeydownとonkeyup事件は必要ありませんて、onkeydownとonkeyup事件を取り除いて、加えて
onpropertychangeイベント、万事Ok!(注:onpropertychangeイベントは通常のhtmlにのみ使用され、strutsのhtml:textareaラベルを使用したイベントは含まれません.そうしないとエラーが発生します)
最終的な修正コードは次のとおりです.
元htmlコードは以下の通りです.
<html:textarea property="areaDescription" rows="4" cols="80" onkeydown="countStrByte(this)" onkeyup="countStrByte(this)" ></textarea>
 
<input name="total" type="text" disabled class="noborder" id="total" value="512" size="4"> :
<input name="used" type="text" disabled class="noborder" id="used" value="0" size="4"> :
<input name="remain" type="text" disabled class="noborder" id="remain" value="512" size="4">
元のjsコードは以下の通りです.
/*
========================================================================
=======================================================================
*/
function countStrByte(message){
var byteCount=0;
var strValue=message.value;
var used=document.getElementById("used");
var total=document.getElementById("total");
var remain=document.getElementById("remain");
var strLength=message.value.length;
var maxValue=total.value;
if(lastCount!=strLength){
for(var i=0;i<strLength;i++){
byteCount=(strValue.charCodeAt(i)<=256)?byteCount+1:byteCount+2;
if(byteCount>maxValue){
message.value=strValue.substring(0,i);
alert(" "+maxValue+" !
: 。");
byteCount=maxValue;
break;
}
}
used.value=byteCount;
remain.value=maxValue-byteCount;
lastCount=strLength;
}
ページ上でこのコードを実行すると、ユーザがテキストフィールドにキーボードで文字を打ち込む(onkeydownおよびonkeyupイベントがトリガーされる)と、現在入力バイト数と残りのバイト数が動的に統計されるが、ユーザが大きなテキストを右クリックで貼り付けることでテキストフィールドに文字を貼り付けると、統計データは変化しない.
追加onchangeイベントで再試行
htmlコードは以下の通りです.
<html:textarea property="areaDescription" rows="4" cols="80" onkeydown="countStrByte(this)" onkeyup="countStrByte(this)" onchange="countStrByte(this)""></textarea>
 
<input name="total" type="text" disabled class="noborder" id="total" value="512" size="4"> :
<input name="used" type="text" disabled class="noborder" id="used" value="0" size="4"> :
<input name="remain" type="text" disabled class="noborder" id="remain" value="512" size="4">
問題が依然として解決していないことを発見して、このようにして、カーソルの焦点がテキストドメインを移動する時だけやっと再統計することができます.
最後にネット上でgoogleはtextareaにもう一つのonpropertychange事件があることを発見して、ネット上の解釈を見て、もとはこの事件はonchange事件と本質的な違いがあって、onpropertychange事件はコントロールの中の内容が変わるとすぐに事件を触発するのです.
今になってやっとこんなに強い事件があることに気づいて、自然にonkeydownとonkeyup事件は必要ありませんて、onkeydownとonkeyup事件を取り除いて、加えて
onpropertychangeイベント、万事Ok!(注:onpropertychangeイベントは通常のhtmlにのみ使用され、strutsのhtml:textareaラベルを使用したイベントは含まれません.そうしないとエラーが発生します)
最終的な修正コードは次のとおりです.
<textarea name="areaDescription" rows="4" cols="80" onpropertychange="countStrByte(this)"><c:out value="${landRelocateInf.areaDescription}"/></textarea>
 
<input name="total" type="text" disabled class="noborder" id="total" value="512" size="4"> :
<input name="used" type="text" disabled class="noborder" id="used" value="0" size="4"> :
<input name="remain" type="text" disabled class="noborder" id="remain" value="512" size="4">