ソフトウェア開発者の日常

こだわりなく書きたいことを書いていきます。

JavaScript

JavaScript:要素が有効な場合のみ、チェックされているか判定する方法

ラジオボタンAの選択によって、別のラジオボタンBの有効/無効状態を切り替えている場合に、JavaScriptでラジオボタンBがチェックされているかチェックをすると、ラジオボタンBが無効状態でもチェックはできてしまいます。そのため、ラジオボタンAの選択を確…

JavaScript:ラジオボタンの選択に従って、他のラジオボタンを制御するときの考え方

以下のようなname属性がtopとsubのラジオボタンがあります。 <input type="radio" name="top" value="4">top4 <input type="radio" name="top" value="5">top5 <input type="radio" name="top" value="44">top44 <input type="radio" name="top" value="0">top0 <input type="radio" name="sub" value="100">sub4

ブラウザがSafariでも、タブで開いているウィンドウをJavaScriptで閉じる方法

先日3年前に稼働させたシステムを再度稼働させる業務を行っていると書きました。 ajya.hatenablog.jpこのシステムに、作業が終わったら終了ボタンを押して、Webブラウザのウィンドウを閉じてもらうようになっている画面があります。 Internet Explorer 11で…

JavaScript:jQuery:複数のチェックボックスのうち、特定チェックボックスにチェックされたとき、入力欄を有効にする方法

複数のラジオボタンがあって、その他を選ばれた場合だけその他を入力してもらうための入力欄を有効にしなければならなくなりました。 手っ取り早く以下の方法で実現しました。HTML側その他を選ばれているか判定するために、id属性をその他にだけ追加します。 <form method="POST" action="next.php"></form>…

JavaScriptのオブジェクトを少し学びました

あるシステムで、データに対して5から-2の点数をつけることになりました。 複数のデータに対して、それぞれ点数をつけなければなりません。 何点を何個つけたのかを数える機能も必要です。例えば、3個データがあって、2個のデータに2点、1個のデータに-1点を…

JavaScript:クリップボードを操作できるライブラリ

先日この記事を読んでツイートしました。 clipboard.js - Flashなしでも使えるクリップボード操作ライブラリ MOONGIFTSafariでは使えないけど、Edgeでは使えるのかな?/clipboard.js - Flashなしでも使えるクリップボード操作ライブラリ MOONGIFT https://t…

JavaScript:ラジオボタンがチェックされているか判定する方法

jQueryを使える場合 if (!$("input:radio[name='check1']:checked").val()) { alert("チェックされていません"); } で判定できます。 jQueryを使えない場合 var i; var flg = false; for (i = 0; i < document.form1.elements['check1'].length; i++) { if (…

JavaScriptが動かなくなった原因

全く修正していない部分が動作しなくなったので焦りました。 photo credit: JavaScript: The Good Parts via photopin (license)JavaScriptが動作しない1年以上前に同僚が作成したプログラムを元に、文字や色等見た目を変更して、新たに利用できるように設定…

JavaScriptでdiv要素の位置を設定

意外なところに落とし穴があって、悩みましたが解決しました。 photo credit: Selvin George via photopin (license)ブラウザをリサイズされているときでも、JavaScriptを使ってdiv要素を表示領域の中央に配置したくて調べました。表示領域のサイズを取得す…

JavaScript:同一クラスを割り当てたチェックボックスを択一選択にするJavaScriptが正常に動かなくなっていて焦りました

複数から1つだけ選べる択一選択にするなら、ラジオボタンにすべきです。 選択した後で、選択しないということもあるため、チェックボックスになっています。チェックボックスで択一選択にする方法JavaScriptで、チェックされるたびに、同一クラスを割り当て…

JavaScript:jQuery:参加者のチェックボックスのON/OFFで、同行者のチェックボックスがあるセルの背景色を変更する方法

昨日の記事でチェックボックスの有効/無効の切り替え方を書きました。 JavaScript:jQuery:参加者のチェックボックスのON/OFFで、同行者のチェックボックスの有効/無効を切り替える方法 - ソフトウェア開発者の日常 JavaScript:jQuery:参加者のチェックボ…

JavaScript:jQuery:参加者のチェックボックスのON/OFFで、同行者のチェックボックスの有効/無効を切り替える方法

代表の参加者が選んだセミナーのみ、同行者が参加できるようにシステムを作成して欲しいと要望がありました。入力する画面では制限をもうけず、入力内容を確認する画面で判定して表示することも考えましたが、手間がかかります。 入力画面で代表の参加者が選…

JavaScript:型を意識していなかったために起きた現象

数値を比較するのか、文字を比較するのか、意識してコーディングするのが基本なのに、基本を怠っていました。 photo credit: Dmitry Baranovskiy via photopin cc比較が正しく行われないPHPとJavaScriptで作られたページがあります。 PHPで処理した結果、 <input type="hidden" id="cnt" value="4"> <input type="hidden" id="max" value="15"> …

JavaScriptで単語数カウント

現在は文字数を1秒ごとに取得している部分を、単語数に変更したいとの要望があり、対応しました。単語数なので、区切りをスペースにすればいいというのはすぐに思いつきましたが、「,」と「.」も対応するとなると、何度も区切る処理が必要になります。 単純…

JavaScript:jQuery:ime-modeの切替

Ineternet Explorer独自で追加され、Firefoxでも利用できるらしいime-modeを、選択肢に合わせてJavaScriptで切り替えることができるか試してみました。結果 jQuery('#target').css("ime-mode", "auto"); として、IMEの状態を変更しないように設定できます。 …

JavaScript:jQuery:jQueryのバージョンによって違う動作

一覧表のチェックボックス全てに、一括でチェックを入れる全選択ボタンと、一括でチェックを外す全解除ボタンを作成しました。 処理のJavaScriptは、以前のソースコードを流用して、以下のコードで動作確認をしました。 $('#all_select').click(function() {…

ボタンを画像にすると、Internet Explorer 8では、期待通りの動作をしない

formタグ内のボタンが、最終的には画像にする予定で、開発初期は <input type='submit' name='next' id='next' value='next'> として、submitのボタンとしていました。 予定通りの動作をするようになったので、見た目の調整の一環として、ボタンを予定通り画像にするために、 <input type='image' name='next' id='next' src='./next.jpg' value='next'> としました。 現象 Google Chromeでは動…

JavaScript:jQuery:onLoadの代わりの記述方法

jQueryを便利に使っていますが、bodyタグのonLoadのタイミングの処理は、そのまま書くしかないと思っていました。 あるとき調べてみたら、 jQuery.event.add(window, "load", function() { func_cnt(); }); とすれば、onLoadと同じタイミングで処理できるこ…

JavaScript:jQuery:optionタグの一括削除と一要素ずつの追加方法

セレクトボックスの選択肢を、他の選択によって切り替える必要があったため、方法を探しました。 方法 HTMLでは、selectタグにoptionタグを使って選択肢を追加しています。 最初と最後のoptionタグの要素は変更なくそのまま使える条件でしたが、一括で削除し…

JavaScript:backgroundColorの設定でエラーが発生した場合の対処方法

以下のJavaScriptで、指定した要素に背景色を設定していました。 var element= document.getElementById('upfile'); element.style.backgroundColor = 'lightgray'; これで問題はないという認識でいましたが、ブラウザによってはエラーが出ていたので、jQuer…

JavaScript:非表示にしたtrタグを表示する際に気をつける点

ラジオボタンやセレクトボックスの選択によって、表示/非表示を切り替えたいと要望されることがあります。 非表示にするは、 document.getElementById('tag').style.display = "none" を設定すればできます。 逆に、表示するには、 document.getElementById…

JavaScript:セレクトボックスで何番目が選ばれたか知る方法

selectタグに設定する、optionタグのvalue要素に適切な数値を設定しておけばわかりますが、設定できない場合はどうすればいいか調べました。 調べた結果 selectedIndex というのがあるので、 var index = jQuery("#selectbox").prop("selectedIndex"); とす…

ひらがなチェックでつまずいたこと

人名のふりがなとして、ひらがなが入力されているか、JavaScriptやPHPでチェックしています。 photo credit: fhisa via photopin cc 「ー(長音)」がひらがなと判定されない 正規表現でチェックしていて、PHPの場合、文字コードがECU-JPで作られたページで…

文字列チェックでちょっと悩みました

JavaScriptで、パスワードとして入力された文字が、 英小文字、英大文字、数字のみが使われていること。 英小文字、英大文字、数字が使われていること。 8文字以上であること。 という要件を全て満たしているかチェックしなければならなくなり、どうい風に書…

Internet Explorerでは動作するJavaScriptを他のブラウザでも動作するように修正しました

Google Chromeでも動作するように修正できました。 photo credit: nyuhuhuu via photopin cc ことの発端 昨年使われたプログラムを今年用に修正して、動作確認をしていたところ、Google Chromeでは動作しないJavaScriptがありました。 Internet Explorerで動…

Google Chromeのデバッガを使って、JavaScriptをデバッグ

部下からヘルプがあったので、JavaScriptをGoogle Chromeのデバッガを使ってデバッグしました。 photo credit: nyuhuhuu via photopin cc 困っていた内容 選択肢がAとBの2個があり、選択肢Aにより選択肢Bで選択できる内容が切り替わる仕組みがあります。 選…

jQuery:配列の値を取得する方法

別の方法では、上手くいかなかった。 photo credit: kohtzy via photopin cc name属性が配列になっている要素から、値を取得して、全て値が設定されていなかったら、警告を表示したかったので、ループしながら値を取得する方法を調べた。 調べた結果、以下の…

jQuery:要素の存在をチェックする方法

以前読んだ覚えがあったので、調べたら簡単な方法だった。 photo credit: Ezu via photopin cc プログラムをデバッグしていたら、存在しない要素から値を取得しようとして、動作がおかしくなっていることに気がついた。 以前jQueryでできることを調べていた…

正規表現が苦手

勉強して試していけば、理解できると思ってはいるけど、着手できていない。 photo credit: See-ming Lee 李思明 SML via photopin cc 英大文字・英小文字・数字のみで最大10桁までというチェックが必要になったので、Ja vaScriptの正規表現で実現する方法を…

jQuery:値を消す方法

2番目に試した方法で目的を果たせた。 photo credit: nlogax via photo pin cc ちょっと書き方を悩んだけど $('#button').click(function(){ $('#val_a').val(""); }); で値消えた。 最初に試して駄目だったのは $('#val_a').val = ""; と書いていた。 試せ…