この Seesaa でも、投稿用のテキストから文字列を選択して URL ボタンを押すとダイアログが表示されて、URL を入力するようになっており、これはごく普通の処理です。しかし、IE では昔デフォルトでこの処理が制限されていた事(たぶん2009年のIE7)がありました。それは当時以下の設定を『有効』にすると制限が解除されて正しく使えるようになっていたのですが、現在ではどちらの設定にしても正しく動作するようです。IE の黒い歴史の残骸なのかどうかは解りませんが、Microsoft で関係文書をみつける事はできませんでした。
▼ 当時、こんなダイアログが出て、情報バーをクリックしてから許可してもう一度同じ作業をする必要がありました。
そして、もう一つスクリプトにクリップボードへのコピーを許可する設定があります。
これは今でも健在で、デフォルトではダイアログボックスが表示されて、貼り付けても良いか(またはコピーしても良いか)確認を要求されます。 IEの clipboardData object で、コピーと貼り付けと両方向可能です
これは、知識のあるユーザが利用する場合は有効にしても「実害」は発生しません。まれに、ユーザがコピーした内容をすり替えて悪意のあるサイトに誘導する可能性があったので、問題になって世の中全てがこのようになった経緯があり、Flash でも同様の対応を当時せまられました。実際使うとすれば、IE 限定なのでイントラネット等の閉じたネットワークで使われる事が一般的で、業務処理を行っていた人達には迷惑な話でした。 現在、どうしても必要なユーザは『信頼済みサイト』に対象ページのドメインを登録して、『信頼済みサイト』の設定を変更するといいと思います。 JavaScript を無効にする 現在そのような事は現実的ではありませんが、設定としてはこちらです。IE では、『アクティブスクリプト』と呼ばれており、たぶん昔は JavaScript の替わりに VBScript が使えていたのでそのような呼び名になったのだと思います。
これと同じような設定は、他のブラウザでも存在します。これらは、JavaScript でどのような画面表示がなされているかと言うような、ページの検査に使う事はあります。 XSS フィルターは有効にします
これは純粋なセキュリティ対策です。どのような悪意を持った使われ方をするか想像付かない為、デフォルトで有効で正解です。ただ、自分自身や社内の便利ツールとして、入力した JavaScript で動的に JavaScript の結果が欲しいような場合は、この設定を『信頼済みサイト』に対象ドメインまたは PC 名を登録してこの設定を無効にするといいと思います。 関連する記事 IEの設定 : 信頼済みサイトに移動する時にダイアログを表示しないようにする フォルダオプションに Windos のレジストリ設定を追加する 関連する Microsoft ドキュメント IE のセキュリティ ゾーン関連のレジストリ エントリについて ※ 初回投稿 : 2009-07-29
2014年10月28日
IEによる JavaScriptのセキュリティ上の制限とその解除
2014年10月27日
IEの設定 : 信頼済みサイトに移動する時にダイアログを表示しないようにする
IEでリンクをクリックすると、以下のようなダイアログが出る場合があります。 ( 過去に、このような設定に最初からなっている時期がありました )( Google で自分のサイトを検索して表示させました ) もしこのようなダイアログが表示される場合は「インターネット」では無く「信頼済みサイト」の設定を変更します。
通常は『有効』になっており、自由に移動できるはずですが、『ダイアログを表示する』となっていると、冒頭のダイアログが表示されてしまいます。 信頼済みサイトとは 通常アクセスするサイトは、誰が運営しているか解りませんのでセキュリティはある程度高く設定されています。しかし、WEB上で作業する場合、セキュリティを低く設定したほうが便利な事はたくさんあり、例えば自分が運営しているサイトにアクセスするならば、疑う必要は無いわけですから、「信頼済みサイト」に登録して、セキュリティの設定を変更して運用する場合もあります。
関連する記事 フォルダオプションに Windos のレジストリ設定を追加する IEの設定 : 混在したコンテンツの表示 IEによるスクリプトの制限の解除 関連するMicrosoft のドキュメント IE のセキュリティ ゾーン関連のレジストリ エントリについて 初回投稿 : 2009-08-09
JavaScript & VBScript : ブラウザから Windows の OS のバージョンを判定
Windows では IE だけで無く、HTA(mshta.exe) や オブジェクト(InternetExplorer.Application)経由でこの方法を利用する事ができます。 VBS ボタンは、IE11 のエミュレーションで IE10 以前に変更すると動作します。IE11 のまま動作させるには、HTML 側で事前に対処する必要があります。IE11 で VBScript を使う場合の注意事項 ( 古い社内アプリ移行時必見 )
<script type="text/javascript">
// ***********************************************
// Windows 環境での OS チェック
// ***********************************************
function checkOS() {
if ( (window.navigator.userAgent).indexOf( "NT 5.0" ) != -1 ) {
alert("Windows2000")
}
if ( (window.navigator.userAgent).indexOf( "NT 5.1" ) != -1 ) {
alert("WindowsXP")
}
if ( (window.navigator.userAgent).indexOf( "NT 6.0" ) != -1 ) {
alert("WindowsVista")
}
if ( (window.navigator.userAgent).indexOf( "NT 6.1" ) != -1 ) {
alert("Windows7")
}
}
</script>
<input type="button" value="JS" onClick="checkOS()">
<script type="text/vbscript">
' ***********************************************
' IE11 のエミレータで IE10 以前で動作します
' ***********************************************
Function checkOS()
if instr( window.navigator.userAgent & "", "NT 5.0" ) <> 0 then
alert("Windows2000")
end if
if instr( window.navigator.userAgent & "", "NT 5.1" ) <> 0 then
alert("WindowsXP")
end if
if instr( window.navigator.userAgent & "", "NT 6.0" ) <> 0 then
alert("WindowsVista")
end if
if instr( window.navigator.userAgent & "", "NT 6.1" ) <> 0 then
alert("Windows7")
end if
End Function
</script>
<input type="button" value="VBS" onClick="Call checkOS" language="VBScript">
初回投稿 : 2009-10-02
2014年10月24日
jQuery と HTML5 で、FORM 送信のテンプレート
WEBアプリケーションとして、FORM の送信処理を標準の JavaScript だけで記述するのと、jQuery 主体で記述するのはかなり違うものになります。また、日付処理にしてもまだまだ標準の HTML ではサポートしきれませんし、日付の論理チェックを イザ JavaScript で記述するにしても結構面倒です。 補足） .ready() / DOMが完全にロードされたときの処理 .ready() の書き方として公式のドキュメントではまったく同じ機能だとして以下の3つを提示しています。
$( document ).ready( handler ) $().ready( handler ) (this is not recommended) $( handler )
真ん中の処理は、『推奨しない』とありますが、最後の処理はシンプルですが、.ready() と同じです ( 原文 : All three of the following syntaxes are equivalent ) 関連する記事 FORM の送信と JavaScript
- HTML5 の input 要素の pattern 属性を利用して入力チェック
- HTML5 の input 要素を number タイプにすると、min、max、step 属性で、spinner を利用できます( Chrome と Firefox。IE11 は内容の検査のみ )
- HTML5 の input 要素の type 属性に range を指定すると、スライダーになります ( Chrome と Firefox と IE11 )
- input 要素に対して値変更可能なコンボボックスにする HTML5 の list 属性( この機能はブラウザによっては要注意 )
最近やっと、HTML5 の新しい属性を使って FORM の処理をサポート可能になってきました( スマホのブラウザは未確認ですが )。ですから、FORM + jQuery + jQyery UI + datepicker + JavaScript + HTML5 というようなテンプレートを作成しました。
FORM の submit イベント
jQuery でこの処理を書くとすると、$( "form" ).submit(function( event ) { 処理 }); という記述になります。ここでは、セレクタとして ID を指定していますが、一般的な一つのフォームを持つページであれば、セレクタは form で十分です。
この時、条件によってサーバへの送信をキャンセルする処理が、event.preventDefault(); となります。( 一般の JavaScript ですと、onsubmit イベント内で、false を戻す処理にあたります )
// ***********************************************
// 更新ボタンがクリックされた時のみ確認
// ***********************************************
$( "#target_form" ).submit(function( event ) {
// 日付妥当性チェック
if ( !($( "#syainBirth" ).val().isDate()) ) {
alert("日付が正しくありません");
$( "#syainBirth" )
.select()
.focus();
event.preventDefault();
return;
}
if ( $(this).data("button_target") == "更新" ) {
if ( !confirm("更新してよろしいですか?") ) {
event.preventDefault();
return;
}
}
});
さらに、このテンプレートでは submit ボタンが複数あるので、『処理』の中でどちらのボタンが押されたかを知る為に、submit ボタンの onclick イベントで FORM にボタンの文字列をユーザデータとしてセットして利用しています。
// ***********************************************
// submit ボタンのクリックイベント
// ***********************************************
$("input[type='submit']").click( function( event ){
$( "#target_form" )
// 押されたボタンの文字列を FORM の内部データとして保存
.data("button_target", event.currentTarget.value);
});
submit ボタンに対するセレクタは input[type='submit'] という属性の値による一致で作成しています。その他の FORM の中にある input 要素等も、サーバに送る為には name属性を必ず指定します。ですから、それぞれの入力要素を参照するには、同様に input[name='名前'] で参照すればいいでしょう。 補足） input 要素で form の送信属性を上書きinput 要素 - HTML | MDN 1) formaction ( ※ 送り先アプリケーションを変更できます ) 2) formenctype ( ※ ファイルアップロードボタンを追加できます ) 3) formmethod ( ※ GET と POST を切りかえる事ができます ) 4) formtarget ( ※ 送り先ウインドウを変更できます / 例) 送り先を IFRAME に切り替える )jQuery UI + datepicker で日付入力支援 jQuery UI の datepicker を使うと、日付入力が容易になりますが、オプションの設定がそれなりに面倒なので、このテンプレートを基本に変更するといいと思います。また、手入力も可能なので、HTML5 の pattern 属性で日付フォーマットの入力を強制しています。
<input class="pass2"
type="text"
name="syainBirth"
id="syainBirth"
value=""
pattern="^[0-9]{4}\/[0-9]{1,2}\/[0-9]{1,2}$"
maxlength="10"
style="">
さらに、正しい日付である必要を考慮する場合の為に、String オブジェクトに isDate メソッドを追加しています。 HTML5 の属性の利用 数字の入力が必要な場合は、type 属性を number にすると簡単ですが、ブラウザによっては 数字を変更するコントロールがフィールドに追加されるので、『給与』フィールドは pattern 属性でチェックしています。但しスマホなどでは、タップすると入力システムが開きますが、number 指定しておくと最初からテンキーが開くようなので、利用価値が大きいです。 ※ 実際問題として、type="tel" が正解のようです(number だと数字を連続入力すると他の文字に変換されてしまいます)。社員コードは必須入力なので、ページがロードされた時に jQuery から required を設定しています。これは、pattern のように HTML で記述してもいいですが、必須に関してはアプリ作成の初期段階のテスト時にはチェックして欲しく無い場合も多いので、動的にセットしています。
その他 キャンセルボタンは、入力チェックの発生しない通常ボタンを使用しています。 このサンプルでは、誰でもすぐ試せるように、Google がホスティングしている jQuery を使用しています。 ▼ 実際の実行
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript">
// ***********************************************
// jQuery UI datepicker 用デフォルトオプション
// ***********************************************
var datepicker_option = {
dateFormat: 'yy/mm/dd',
dayNamesMin: ['日', '月', '火', '水', '木', '金', '土'],
monthNames: ['１月', '２月', '３月', '４月', '５月', '６月', '７月', '８月', '９月', '１０月', '１１月', '１２月'],
showMonthAfterYear: true,
yearSuffix: '年',
changeYear: true,
showAnim: 'fadeIn',
yearRange: "1950:2014"
}
$(function() {
// ***********************************************
// submit ボタンのクリックイベント
// ***********************************************
$("input[type='submit']").click( function( event ){
$( "#target_form" )
// 押されたボタンの文字列を FORM の内部データとして保存
.data("button_target", event.currentTarget.value);
});
// ***********************************************
// 更新ボタンがクリックされた時のみ確認
// ***********************************************
$( "#target_form" ).submit(function( event ) {
// 日付妥当性チェック
if ( !($( "#syainBirth" ).val().isDate()) ) {
alert("日付が正しくありません");
$( "#syainBirth" )
.select()
.focus();
event.preventDefault();
return;
}
if ( $(this).data("button_target") == "更新" ) {
if ( !confirm("更新してよろしいですか?") ) {
event.preventDefault();
return;
}
}
});
// ***********************************************
// datepicker プラグイン
// ***********************************************
$("#syainBirth").datepicker(datepicker_option);
// ***********************************************
// 必須と初期フォーカス
// ***********************************************
$("#syainCode")
// HTML5 属性
.prop("required", true)
.focus();
});
// ***********************************************
// 日付妥当性チェックを String オブジェクトに追加
// ***********************************************
String.prototype["isDate"] = function() {
var str = this.valueOf();
if ( str == "" ) {
return true;
}
if ( !str.match(/^\d{4}\/[\d]+\/[\d]+$/) ) {
return false;
}
var parts = str.split( "/" );
var nYear = Number(parts[0]);
var nMonth = Number(parts[1]) - 1;
var nDay = Number(parts[2]);
// 月,日の妥当性チェック
if ( 0 <= nMonth && nMonth <= 11 && 1 <= nDay && nDay <= 31 ) {
var dt = new Date(nYear, nMonth, nDay);
if( isNaN(dt) ) {
return false;
}
else if(
dt.getFullYear() == nYear &&
dt.getMonth() == nMonth &&
dt.getDate() == nDay ) {
return true;
}
else{
return false;
}
}
else{
return false;
}
};
</script>
<form method="get"
id="target_form"
target="my_ferame"
action="http://winofsql.jp/php_get.php"
accept-charset="utf-8">
<input type="submit"
name="send"
id="send_check"
value="送信" >
<table id="main">
<tr>
<td class="ttl">社員コード
</td>
<td>
<input type="text"
name="syainCode"
id="syainCode"
value=""
maxlength="4"
style="">
</td>
</tr>
<tr>
<td class="ttl">氏名
</td>
<td>
<input class="pass2"
type="text"
name="syainName"
id="syainName"
value=""
maxlength="50"
style="">
</td>
</tr>
<tr>
<td class="ttl">性別
</td>
<td>
<select class="pass2"
name="syainSex"
style="width:100px;">
<option value='0' >男性
</option>
<option value='1' >女性
</option>
</select>
</td>
</tr>
<tr>
<td class="ttl">生年月日
</td>
<td>
<input class="pass2"
type="text"
name="syainBirth"
id="syainBirth"
value=""
pattern="^[0-9]{4}\/[0-9]{1,2}\/[0-9]{1,2}$"
maxlength="10"
style="">
</td>
</tr>
<tr>
<td class="ttl">給与
</td>
<td>
<input class="pass2"
type="text"
name="syainKyuyo"
id="syainKyuyo"
value=""
pattern="^[0-9]+$"
maxlength="7"
style="">
</td>
</tr>
</table>
<input type="submit"
name="send"
id="send_update"
value="更新">
<input type="button"
name="cancel"
id="button_cancel"
value="キャンセル">
</form>
<iframe name="my_ferame"
frameborder="1"
scrolling="yes"
width="400"
height="200" >
</iframe>
2014年10月23日
ノーマル JavaScript と比較。jQuery でクリックしたテキスト( SPAN 要素 と INPUT またはテキストエリア ) を選択状態にする
クリックした後、右クリックまたは CTRL+C でそのテキストをクリップボードにコピーする事を想定しています。 jQuery での実装 最新のブラウザならば、SPAN 部分は皆『document.createRange()』で作成されたオブジェクトで正しく動作します。但し、INPUT 等の入力可能な部分での処理は、エレメント(要素)の、setSelectionRange メソッドで対応します。その際、IE8 以前では、createTextRange で処理を行わないと動作しません( ここはいずれ必要なくなる処理です ) これらの処理は、サンプルでは文字列全体の選択を行っていますが、いずれも任意の範囲指定が可能です。 JavaScript のみでの実装 それに対して、JavaScript のみで記述したものは、入力部分を全て選択する場合は要素に直接イベントとして this.select() を実行されるのが簡単です。SPAN では、jQiery と同様に処理しています。 jQuery でのイベント登録 jQuery のセレクタによるオブジェクト複数選択より、each メソッドで全ての要素に click イベントを登録できるので効率的です。
▼ JavaScript のみ : クリックして下さい あいうえお abc-001 日本語 表示 ▼ jQuery : クリックして下さい あいうえお abc-001 日本語 表示
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
// ***************************
// 一般的な関数定義
// ***************************
function textSelect(obj) {
var range,sel;
if (window.getSelection) {
range = document.createRange();
range.setStart(obj.firstChild,0);
range.setEnd(obj.firstChild,obj.firstChild.nodeValue.length);
sel = getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
}
// ***************************
// jQuery の初期処理
// ***************************
$(function(){
$(".selection").each(function(){
$(this).click(function(){
var tagName = this.tagName.toLowerCase();
switch( tagName ) {
case 'textarea':
case 'input':
if (this.setSelectionRange) {
this.setSelectionRange(0,$(this).val().length);
}
// 古いIE(8以前)用
else if (this.createTextRange) {
var range = this.createTextRange();
range.collapse(true);
range.moveStart('character', 0);
range.moveEnd('character', $(this).val().length);
range.select();
}
break;
default:
if (window.getSelection) {
var range = document.createRange();
range.setStart(this.firstChild,0);
range.setEnd(this.firstChild,$(this).text().length);
sel = getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
}
});
})
});
</script>
<pre class="w6">
<b class=sttl>▼ JavaScript のみ</b>
<span onclick='textSelect(this)'>あいうえお</span>
<span onclick='textSelect(this)'>abc-001</span>
<span onclick='textSelect(this)'>日本語 表示</span>
<input onclick='this.select()' value="日本語 表示">
<textarea onclick='this.select()'>日本語 表示</textarea>
<b class="sttl">▼ jquery.selection</b>
<span class="selection">あいうえお</span>
<span class="selection">abc-001</span>
<span class="selection">日本語 表示</span>
<input class="selection" value="日本語 表示">
<textarea class="selection">日本語 表示</textarea>
</pre>
関連する記事 jQuery.selection(プラグイン) : テキストエリア内のカーソル位置や選択範囲に対して文字列を追加したり置き換えたりする。
2014年10月21日
jQuery : table の行をクリックして、jQuery UI のダイアログを表示し、行データをダイアログ内で変更して table の列にデータを戻す
だいたい想定される、table データを jQuery で行単位で処理する方法です。ダイアログを表示する位置は、デバイスによって調整する必要があると思いますが、殆どの目的はこんな感じで対処できると思います。 table の行をクリック( タップ ) すると、モーダルダイアログ( 実際は DIV )を開いて、行のデータをダイアログ内に転送して処理します。 数値入力は、モバイルを想定して type="tel" にして、iPhone4S で動作確認しました。
| 001 | りんご | 500 |
| 002 | いちご | 300 |
▼ ソースコード
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link id="link" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style type="text/css">
#data {
border-collapse: collapse;
border: solid #000000 1px;
}
#data tr {
cursor: pointer;
}
#data td {
padding: 5px;
border: solid #000000 1px;
}
</style>
<script type="text/javascript">
$(function(){
$("#data tr").each(function(index){
$(this).click(function(){
$( "#code" ).text( $(this).children( "td" ).eq(0).text() );
$( "#namae" ).text( $(this).children( "td" ).eq(1).text() );
$( "#kingaku" ).val( $(this).children( "td" ).eq(2).text() );
var jq = $(this);
$( "#dialog-message" ).dialog({
modal: true,
title: "ダイアログのタイトルです",
close: function() {
console.log("x ボタンがクリックされました");
},
buttons: [
{
text: "確認",
click: function() {
jq.children( "td" ).eq(2).text( $( "#kingaku" ).val() );
$( this ).dialog( "close" );
console.log("確認 ボタンがクリックされました");
}
},
{
text: "キャンセル",
click: function() {
$( this ).dialog( "close" );
console.log("キャンセル ボタンがクリックされました");
}
}
]
});
});
});
});
</script>
<table id="data">
<tr>
<td class="code">001</td>
<td class="name">りんご</td>
<td class="value">500</td>
</tr>
<tr>
<td class="code">002</td>
<td class="name">いちご</td>
<td class="value">300</td>
</tr>
</table>
<div id="dialog-message" title="" style='display:none;'>
コード <span id="code"></span><br>
名称 <span id="namae"></span><br>
金額 <input id="kingaku" type="tel" size="6">
</div>
jq は、クリック( またはタップ )された jQuery の行(tr) オブジェクトです。この保存しておいた(25行)オブジェクトを使用して、入力したデータを行に戻しています(36行)。
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定＞ 詳細設定＞ ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。 Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。 また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。 ※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです 対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。※ エキスパートモードで表示しています アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
<% if:page_name eq 'archive' -%> アーカイブページでのみ表示される内容 <% /if %> <% if:page_name eq 'category' -%> カテゴリページでのみ表示される内容 <% /if %> <% if:page_name eq 'tag' -%> タグページでのみ表示される内容 <% /if %>この記述は、以下の場所で使用します
|
|
