TextAreaの文字の長さを自動プロンプトします.
3635 ワード
概要:マイクロブログには、マイクロブログの文字を自動的に提示する機能があり、ここでは「onpropertychange」イベントを使用している人もいますが、このイベントは火狐の下ではサポートされていません.だから、このブラウザの互換性のない欠陥を補うために、私はdemoを書いて皆さんの参考にしました.
解析:関連するW 3 c資料を読み、火狐の下でIEのような「onpropertychange」のイベントを互換化するには、textAreaに「input」というイベントリスナーを追加する必要があります.
くだらないことはあまり言わないで、くだらないことばかり言っているかもしれません.
実践:
共通ページ:
(1)JS方式:
2:Jquery方式は、jquery方式をお勧めします.速度効率はjs方式よりも優れています.
注意:TextAreaのIDはメッセージのプロンプトのIDに関連付けられます.
【
解析:関連するW 3 c資料を読み、火狐の下でIEのような「onpropertychange」のイベントを互換化するには、textAreaに「input」というイベントリスナーを追加する必要があります.
くだらないことはあまり言わないで、くだらないことばかり言っているかもしれません.
実践:
共通ページ:
<style type="text/css">
.msblogError,.msblogMsg{font-family:Georgia,Tahoma,Arial;font-size:26px;font-weight:400;font-style:normal;line-height:33px;word-spacing:0;vertical-align:middle;}
.msblogError{color:#E56C0A;}
.msblogMsg{color:#999999;}
</style>
<p><form>
<textarea id="msgTxt" name="Content" autocomplete="off" tabindex="1" rows="7" class="w500"></textarea>
</form></p>
<p>
<span id="msgTxtCountTxt"> <em class="msblogMsg">140</em> </span>
<button type="button" id="btnFabu" title=" Ctrl+Enter" tabindex="2"> </button></p>
(1)JS方式:
<script type="text/javascript">
window.onload=function()
{
if(navigator.userAgent.indexOf("MSIE")>0) //ie
{
document.getElementById('msgText').attachEvent("onpropertychange",TxtMaxlength);
}else
{
document.getElementById('msgText').addEventListener("input",TxtMaxlength,false);
}
};
function TxtMaxlength(){
MaxCount=140;
var $=function(id){return document.getElementById(id);}
var ObjCou=$('msgTxt').value.length;
$($("MsgTxt").id+"CountTxt").getElementsByTagName("em")[0].innerHtml=MaxCount-ObjCou;
if (ObjCou > MaxCount){
$("msgTxtCountTxt").innerHtml=" <em class='msblogError'>"+ (ObjCou-MaxCount) +"</em> ";
}else{
$("msgTxtCountTxt").innerHtml=" <em class='msblogMsg'>"+ (MaxCount-ObjCou) +"</em> ";
}
}
</script>
2:Jquery方式は、jquery方式をお勧めします.速度効率はjs方式よりも優れています.
<script type="text/javascript">
$(function () {
addCheck('msgTxt');
});
function addCheck(id){
$('#'+id).bind('propertychange input',TxtMaxlength);
}
function TxtMaxlength(){
MaxCount=140;
var ObjCou=$(this).attr("value").length;
$("#"+this.id+"CountTxt em").html(MaxCount-ObjCou);
if (ObjCou > MaxCount){
$("#"+this.id+"CountTxt").html(" <em class='msblogError'>"+ (ObjCou-MaxCount) +"</em> ");
}else{
$("#"+this.id+"CountTxt").html(" <em class='msblogMsg'>"+ (MaxCount-ObjCou) +"</em> ");
}
}
</script>
注意:TextAreaのIDはメッセージのプロンプトのIDに関連付けられます.
【