twitter風文字数カウント GeckoTang Follow 2010-08-16 18:50:24 License: MIT License Fork0 Fav2 View2006 下記を元にしています。 * http://d.hatena.ne.jp/ginpei/20100814 * そしてプラグインにしてみました。 * count : 数値を入れる対象 * max : 最大値(デフォルトはcountのテキスト) * normal: 通常時に実行する関数 * over : 文字数が超えた時に実行される関数 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 43 lines HTML 89 lines CSS 3 lines 下記を元にしています。 * http://d.hatena.ne.jp/ginpei/20100814 * そしてプラグインにしてみました。 * count : 数値を入れる対象 * max : 最大値(デフォルトはcountのテキスト) * normal: 通常時に実行する関数 * over : 文字数が超えた時に実行される関数 twitter風文字数カウント jQuery v1.4.2 /* * 下記を元にしています。 * http://d.hatena.ne.jp/ginpei/20100814 * そしてプラグインにしてみました。 * count : 数値を入れる対象 * max : 最大値(デフォルトはcountのテキスト) * normal: 通常時に実行する関数 * over : 文字数が超えた時に実行される関数 */ $.fn.twCount = function(conf){ var tm; var nc=0; var $this = this; conf = $.extend({ count: "#tweeting-counter", max : conf.count.text(), normal : function(){ conf.count.css({'color':''}); }, over : function(){ conf.count.css({'color':'#c00'}); } },conf); var counter = function(){ nc = conf.max - $this.val().length; if(nc>0){ conf.normal(); }else{ conf.over(); } conf.count.text(nc); }; $this.focus(function(){ tm = setInterval(function(){ counter(); },100); }).blur(function(){ counter(); clearTimeout(tm); }); return this; }; <h1>twitter風文字数カウント</h1> <p>@ginpei_jpさんのエントリー<a target="_blank" href="http://d.hatena.ne.jp/ginpei/20100814">[javascript]（Twitter風に）入力文字数をカウントするスクリプト</a>を見てプラグインにしてみようと思いました。</p> <h2>通常</h2> <pre> $('#tweeting-content').twCount({ count : $('#tweeting-counter') }); </pre> <div id="tweeting-counter">140</div> <form><textarea id="tweeting-content"></textarea></form> <h2>文字数を超えたときの動作を変える</h2> <pre> $('#tweeting-content2').twCount({ count : $('#tweeting-counter2'), normal : function(){ this.count.css({ 'color':'black', 'font-weight':'normal' }); $('#error').text(''); }, over : function(){ this.count.css({ 'color':'blue', 'font-weight':'bold' }); $('#error').text(' 文字数を超えています。'); } }); </pre> <div id="tweeting-counter2">200</div> <form><textarea id="tweeting-content2"></textarea></form> <div id="error"></div> <h2>最大値を自動取得ではなく自分で。</h2> <pre> $('#tweeting-content3').twCount({ count : $('#tweeting-counter3'), max : 100 }); }); </pre> <div id="tweeting-counter3">100</div> <form><textarea id="tweeting-content3"></textarea></form> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script> <script type="text/javascript" src="http://jsdo.it/GeckoTang/9SnW/js"></script> <script type="text/javascript"> <!-- $(function(){ //最大値は自動取得 $('#tweeting-content').twCount({ count : $('#tweeting-counter') }); //コールバックを指定する //ただsetIntervalに入るので無茶は出来ないかなぁ $('#tweeting-content2').twCount({ count : $('#tweeting-counter2'), normal : function(){ this.count.css({ 'color':'black', 'font-weight':'normal' }); $('#error').text(''); }, over : function(){ this.count.css({ 'color':'blue', 'font-weight':'bold' }); $('#error').text('文字数を超えています。'); } }); //最大値を設定する $('#tweeting-content3').twCount({ count : $('#tweeting-counter3'), max : 100 }); }); --> </script> twitter風文字数カウント body{font-size:12px;} pre{background:#ccc;padding:5px;} 下記を元にしています。 * http://d.hatena.ne.jp/ginpei/20100814 * そしてプラグインにしてみました。 * count : 数値を入れる対象 * max : 最大値(デフォルトはcountのテキスト) * normal: 通常時に実行する関数 * over : 文字数が超えた時に実行される関数 /* * 下記を元にしています。 * http://d.hatena.ne.jp/ginpei/20100814 * そしてプラグインにしてみました。 * count : 数値を入れる対象 * max : 最大値(デフォルトはcountのテキスト) * normal: 通常時に実行する関数 * over : 文字数が超えた時に実行される関数 */ $.fn.twCount = function(conf){ var tm; var nc=0; var $this = this; conf = $.extend({ count: "#tweeting-counter", max : conf.count.text(), normal : function(){ conf.count.css({'color':''}); }, over : function(){ conf.count.css({'color':'#c00'}); } },conf); var counter = function(){ nc = conf.max - $this.val().length; if(nc>0){ conf.normal(); }else{ conf.over(); } conf.count.text(nc); }; $this.focus(function(){ tm = setInterval(function(){ counter(); },100); }).blur(function(){ counter(); clearTimeout(tm); }); return this; }; <h1>twitter風文字数カウント</h1> <p>@ginpei_jpさんのエントリー<a target="_blank" href="http://d.hatena.ne.jp/ginpei/20100814">[javascript]（Twitter風に）入力文字数をカウントするスクリプト</a>を見てプラグインにしてみようと思いました。</p> <h2>通常</h2> <pre> $('#tweeting-content').twCount({ count : $('#tweeting-counter') }); </pre> <div id="tweeting-counter">140</div> <form><textarea id="tweeting-content"></textarea></form> <h2>文字数を超えたときの動作を変える</h2> <pre> $('#tweeting-content2').twCount({ count : $('#tweeting-counter2'), normal : function(){ this.count.css({ 'color':'black', 'font-weight':'normal' }); $('#error').text(''); }, over : function(){ this.count.css({ 'color':'blue', 'font-weight':'bold' }); $('#error').text(' 文字数を超えています。'); } }); </pre> <div id="tweeting-counter2">200</div> <form><textarea id="tweeting-content2"></textarea></form> <div id="error"></div> <h2>最大値を自動取得ではなく自分で。</h2> <pre> $('#tweeting-content3').twCount({ count : $('#tweeting-counter3'), max : 100 }); }); </pre> <div id="tweeting-counter3">100</div> <form><textarea id="tweeting-content3"></textarea></form> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script> <script type="text/javascript" src="http://jsdo.it/GeckoTang/9SnW/js"></script> <script type="text/javascript"> <!-- $(function(){ //最大値は自動取得 $('#tweeting-content').twCount({ count : $('#tweeting-counter') }); //コールバックを指定する //ただsetIntervalに入るので無茶は出来ないかなぁ $('#tweeting-content2').twCount({ count : $('#tweeting-counter2'), normal : function(){ this.count.css({ 'color':'black', 'font-weight':'normal' }); $('#error').text(''); }, over : function(){ this.count.css({ 'color':'blue', 'font-weight':'bold' }); $('#error').text('文字数を超えています。'); } }); //最大値を設定する $('#tweeting-content3').twCount({ count : $('#tweeting-counter3'), max : 100 }); }); --> </script> body{font-size:12px;} pre{background:#ccc;padding:5px;} use an iframe compat browser, deer Tweet QR code Embed Design view Code view <script type="text/javascript" src="http://jsdo.it/blogparts/9SnW/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/GeckoTang/9SnW" title="twitter風文字数カウント">twitter風文字数カウント - jsdo.it - share JavaScript, HTML5 and CSS</a></p> zip tags Tweet twitter Favorite by dentaq fingaholic Forked sort new page view favorite forked forked: twitter風文字数カウント teil_study 00 131views 44/89/3
