HOME サイトマップ 営業日カレンダー お問い合わせ

コニファ:javascriptの小技・まとめ


株式会社コニファ・ロゴ

javascriptの小技・まとめ

  • HOME
  • SaaS一覧
  • システム受託開発
  • スマートフォン向け開発
  • 業務内容/実績
  • 会社案内

 

株式会社コニファ・無料で使えるBtoB WEB受注システム・0万石 WEB受注システム(バナー用3)
無料で使えるBtoB WEB受注システム,0万石受注システム,0円,Free
無料で使えるBtoB WEB受注システム
0万石 WEB受注システム


javascriptの小技・まとめ一覧

このページの主なコンテンツは「CSS、jQuery等のテストページ」からの転載、もしくは追加解説です。
  • [ jQuery ]テキストエリアの入力文字数をカウントして制限文字数(例は100字)を超えると、注意を表示
  • [javascript]ChromeやSafariなどwebkit系ブラウザのonfocusの動きをフィックス
  • [ jQuery ]HTML5 Web Storageのテスト
  • [javascript]document.writelnでテキストの文字列を書き込み後、正しく改行させる
  • [ jQuery ]DOM要素の縦横サイズを padding、border-width、marginを含んで取得

テキストエリアの入力文字数をカウントして制限文字数(例は100字)を超えると、注意を表示

テキストエリア内の入力した文字数をカウントし、制限も字数をこえたところで、カウント数値の文字色を赤紫でボールドに変更、さらに「制限オーバーです。」を赤色文字で表示します。文字を制限内に減らせば元に戻ります。
制限文字数は、 if(counter >= 101)で設定。 →元記事
テキストエリア:文字数制限100文字(半角、全角)まで
現在の文字数:0文字
ソースを表示/非表示

$(function () {
	$("textarea").keyup(function(){
		var counter = $(this).val().length;
		$("#mojicount").text(counter);
		if(counter == 0){
			$("#mojicount").text("0");
			$("#mojicount").css("font-weight","normal");
		}
		if(counter >= 101){
			$("#mojicount").css("color","#bd0fa6");
			$("#mojicount").css("font-weight","bold");
			$("#mojicount2").css("font-weight","bold");
			$("#mojicount2").css("color","red");
			$("#mojicount2").text("制限オーバーです。");
		} 
		else{$("#mojicount").css("color","#666");
			$("#mojicount2").text(" ");}
		});
	});

ChromeやSafariなどwebkit系ブラウザのonfocusの動きをフィックス

テキストフィールドをonfocusして内容をコピーしたいとき、モダンブラウザでは、下記のように「onfocus」を使い、マウス左クリック1回で内容をすべて選択できます。
<input type="text" onfocus="this.select();" value="マウス左クリック1回で内容をすべて選択" />
確認用テキストフィールド1:

しかし、Google ChromeやSafariなどwebkit系ブラウザではできません。これは仕様のようですが、それを他のブラウザ同様にマウス左クリック1回で内容をすべて選択できるようにするため「onfocus」を次のように書き換えます。

onfocus="setTimeout(function(){document.「form名」.「textField名」.select()},0);	
確認用テキストフィールド2:


今度は、webkit系ブラウザでも一度のクリックで選択できます。

→元記事

HTML5 Web Storageのテスト

Web Storageとは、ブラウザ標準で利用できるHTML5のデータストアの一種で、データを特定するための名前(key)と値との組み合わせでデータを管理するKey-Value型データストアです。


従来からのcookieと比べると、データサイズは、cookieが4KBに対して、Web Storageは5MBまで保存できます。またcookieは有効期限がありますが、Web Storageにはありません。


Web Storageには2種類あります。

・Session Storage
ブラウザが起動している間だけ有効で、終了するとデータは削除されます。
・Local Storage
ブラウザを終了しても、データが保持されます。


以下はLocal Storageのサンプルです。テキストフォールドになにか入力後、「データ保存」クリックで、データをローカルに保存します。「データ読み込み」ボタンクリックで、保存した内容を表示します。また、ブラウザを終了しても保存したデータは保持されます。

Local Storageのテスト

 データ保存
データ読み込み
・最終保存時刻(ローカル):
・データ:

→元記事(scriptのソースもこちら)

document.writelnでテキストの文字列を書き込み後、正しく改行させる。

document.writelnは、document.writeと同じくテキストの文字列を書き込みますが、その直後に改行文字を追加します。 ただ、ブラウザによっては、改行文字を半角スペースとして認識してしまい改行されません。

そこで次のようにします。

● <pre>タグで囲う


<pre class="text1">
<script>
document.open();
document.write("<p class='blue'>サンプルテキスト1:<p>");
document.write("この文章は、");
document.write("改行されません。");
document.writeln("<br>");
document.write("<p class='blue2'>サンプルテキスト2:F<p>");
document.writeln("こちらの文章は、");
document.writeln("改行されます。");
document.close();
</script>
</pre>

● スクリプト内にて、<pre>タグで囲う

<script>
document.open();
document.write("<pre class='text1'>");
document.write("<p class='blue'>サンプルテキスト1:<p>");
document.write("この文章は、");
---中略---
document.write("<\/pre>"); document.close(); </script>

DOM要素の縦横サイズを padding、border-width、marginを含んで取得

javascriptでDOM要素の縦横サイズを取得する際、paddingやborder-width、marginを含んだ値が必要なことがあります。次のサンプルのように値を取り出すと、paddingやborder-width、marginが含まれません。
var 変数 = $('#box').width(); //widthのみの値
次のようにinnerWidth()、outerWidth()、outerWidth(true)を利用することで、paddingやborder-width、marginを含んだ値を取り出すことができます。 高さについても同様に、innerHeight()、outerHeight()、outerHeight(true)を使います。  

●サンプル

下の画像は、次のように指定したものです。
「width: 200px; height: 150px; padding: 10px; border-width: 20px; margin: 10px;」

横サイズ:
var 変数 = $('#box').innerWidth(); //width + padding の値 220px
var 変数 = $('#box').outerWidth(); //width + padding + border-width の値 260px
var 変数 = $('#box').outerWidth(true); //width + padding + border-width + margin の値 280px

縦サイズ:
var 変数 = $('#box').innerHeight(); //height + padding の値 170px
var 変数 = $('#box').outerHeight(); //height + padding + border-width の値 210px
var 変数 = $('#box').outerHeight(true); //height + padding + border-width + margin の値 230px


→元記事(scriptのソースもこちら)



▲このページのトップへ

株式会社コニファ:ミニbanner画像include用-1(フルパス)

株式会社コニファのSaaS、ASP

  • ハンディターミナルを活用したシステム開発
  • SATOラベルプリンタ用システム開発
  • 耐洗ラベルプリントシステム開発
  • 定期配達・回収品管理システム
  • 無料で使える,0万石在庫照会システム,0円,Free
  • BtoB WEB受注システム
  • 0万石 WEB受注システム
  • 購買システム,既存のホストを利用するEDI連動型・百万石 購買システム,小口の仕入先,電子化,納期情報,コメント
  • 「BtoB WEB受注システム」PKI認証対応版
  • 「BtoB WEB受注システム」スマートフォン・iPad対応版


 

コニファHOME | サイトマップ | 会社案内 | お問い合わせ

copyright © 2019 Conifer,Inc. All rights reserved.