Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up
Enterキーを押すと、フォームが送信されることがある。 キーボード入力後、マウス操作してクリックする、という手間が省けてとても便利だと思う。 しかし、入力中にうっかり押してしまったりなど、期待しない挙動をしてしまうこともあるだろう。 この挙動は、HTMLの仕様がそうなっているからである。 ※ 古いブラウザでは以下の内容で対処できない場合があります。 ※ ブラウザの仕様が変わり、以下の内容では対応できなくなる場合があります。 対処方法① 送信ボタンを書き換える(テキストフィールドなどが2つ以上のとき) テキストフィールドなどがアクティブな状態で、Enterキーを押すとフォームが送信される。 <form name="testform1" action="test1.html"> <input type="text" name="text1" /> <input type="text" nam
javascriptから、特定のリンク要素をクリックさせたい時があるかもしれないですね。 今回その必要が生じたのは、javascriptのlocation.hrefではInternet Explorerでリファラが送信されないことが発覚したから。 本来、そのような実装は避けるべきだが、どうしても特定箇所のリンクをクリックさせたいときは下記のように書く。
スクリプトを動的に読み込むには、scipt要素をスクリプトで作成し、それをドキュメントに追加します。コードで記述すると、それは次のようになります。 var script = document.createElement( 'script' ); script.type = 'text/javascript'; script.src = filename; var firstScript = document.getElementsByTagName( 'script' )[ 0 ]; firstScript.parentNode.insertBefore( script, firstScript ); 作成済みのscript要素のsrcプロパティだけを変更する方法では、初回の1回だけしか読み込みが実行されません。よってこのようにscript要素の作成から行います。 この方法を利用して、クロ
この記事のオリジナルは voxxed に投稿されたものです。 JavaScript関連の問題を抱えるチームをサポートする仕事を通じて、いくつか共通の問題点があることに気づきました。もしあなたもJavaScriptに対するイライラを感じているのであれば、この記事は何らかの助けになるかもしれません。おことわり:私がお教えするヒントはすでにご存知のものもあるとは思いますが、うまくいけば、多少なりとも有用な情報があるかもしれません。特にエンタープライズアプリケーションやCMSソリューションを構築する際に有効なヒントです。チームの誰もが話したがらないCMSのコードについてお話しします。いずれも必要に応じて採用できるものです。 debuggerステートメント 大半のブラウザでサポートされているにもかかわらず、JavaScriptを書く際に最も活用しきれていない機能の1つです。debuggerステートメ
入力できるダイアログを表示するスクリプトです。 以下のサンプルでは、ユーザー名に tama と hana が登録されています。 <html> <head> <title>TAG index Webサイト</title> <script type="text/javascript"> <!-- function disp(){ // 入力ダイアログを表示 + 入力内容を user に代入 user = window.prompt("ユーザー名を入力してください", ""); // 入力内容が tama の場合は example_tama.html にジャンプ if(user == 'tama'){ location.href = "example_tama.html"; } // 入力内容が hana の場合は example_hana.html にジャンプ else if(user ==
JavaScriptは型変換がおもしろいと思うので残しておく JavaScriptの勉強中なので、こうしたほうがいいなどありましたらガンガン言っていただけると喜びます。 基本型から 文字列 と 数値 変換の方法がいくつかあり、それぞれ挙動が違ってきます。 文字列 → 数値 var value = '1234'; // 以下、1234 Number(value); parseInt(value,10); value - 0; +value; value - 0 数値演算のオペランドに文字列値を書くと、暗黙に数値に型変換されます。(+は文字列連結として扱われる) そのため、value - 0 ではnumが暗黙の型変換によって数値になりますが、0を引いても数値は変わらないため型変換だけが行われることになります。 +value また、+演算子を単項演算子で使用すると、正の符号演算になります。正の符
// ヒストリーオブジェクトを取得する var history_obj = window.history; // 出力テスト console.log(history_obj);
このあいだ諸事情で調べたら、意外とまとまってるとこなかったなのでちょこっと書いてみます。 IE8以降を対象 ブラウザの「戻る」ボタンで他のページに遷移しない Backspaceキーでの「戻る」も許可しない みたいな方針で調べてみました。 まあ結論から言うと Ah, the back button. You might imagine "back" fires a JavaScript event which you could simply cancel like so: document.onHistoryGo = function() { return false; } No so. There simply is no such event. javascript - Intercepting call to the back button in my AJAX applicatio
[JavaScript] null とか undefined とか 0 とか 空文字('') とか false とかの判定についてJavaScripttips ※本家はこちらのブログエントリーになります. 毎日 html, css, js についてのエントリーを公開しているのでよかったらRSS登録してください♪ null とか undefined とか 0 とか 空文字('') とか false とかの 判定について書いてみました. 各型, 値の評価 各型, 値が条件式でどう評価されるのかを見てみましょう. value type result
let mybox = { width:400, height:300 }; console.log(mybox); >> {width: 400, height: 300} mybox.color = '#FF0000'; // 新しいプロパティを追加 console.log(mybox); >> {width: 400, height: 300, color: "#FF0000"} オブジェクトに対して、現在存在しないプロパティ名 color を指定して値を代入しています。するとオブジェクトにプロパティ名と値のペアからなる新しいプロパティが追加されました。 なおプロパティ名を指定して値を代入する方法は、ピリオド演算子を使う方法でも角括弧[]を使う方法でもどちらでも構いません。 プロパティを削除する オブジェクトからプロパティを削除したい場合には delete 演算子を使用します。書式は
JavaScript、というかjQueryを使って、キーイベントが発生した際にキーコードを取得する方法と利用についてのメモ。 キーコードの取得 キーボードイベント発生でイベントオブジェクトがわたされるので、whichプロパティでキーコードを取れる。例えばenterキーを押すと、enterキーのキーコードは13なので、event.which === 13となる。enterキーが押されたときに反応させるにはこうなる。 $("body").keypress( function( event ) { if( event.which === 13 ){ alert( "enterキーが押されました。" ); } }); コントロールキー / オルトキー / シフトキーとの同時押し コントロールキー・オルトキー・シフトキーと他のキーを同時押しした場合のキーイベントの取得方法。 まず、コントロールキー・
仕事で、JSで計算ってできない?という質問が出てきたので、簡単に「できます!」と答えた。でもよくよく考えると、単純な処理だけで終えるべきか、しっかりつくり込むか考えないと。 とりあえずは単純に作ってみた。 単純に入力した値を足してみる まずはinput要素に入力した文字を単純に「+」で足してみようと思います。 ■コードとデモ jQuery(function($){ $('button','.demo1').click(function(){ //左側inputの入力値を取得(numA) var numA = $('input:eq(0)','.demo1').val(); //右側inputの入力値を取得(numB) var numB = $('input:eq(1)','.demo1').val(); //左+右の値を出力 $('input:eq(2)','.demo1').val(nu
リクエストのログを記録していくときにjQueryのajax通信を使う場合は除外したかったので、サーバー側で判別する方法を調べたメモ。 環境変数のHTTP_X_REQUESTED_WITHを見れば分かるみたい。サーバーサイド(PHP)のサンプルコードは下のような感じ。 /** * Ajaxによるリクエストかどうか * * @return boolean True or False */ public function isAjax() { if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'){ return true; } return false; } これで判断できるのはjQueryがajax通信をするときのリクエス
フォーム入力で日付を扱うことあると思いますが、数字だけの割にはいろいろと制御が面倒な部分でもあります。 入力フォーマット、年・月・日の制御など、作る側としてはかなり見えない部分の仕事が増えます。 入力するユーザの立場としても、フォームがドーンとあっただけでは入力に迷いますし、こういう局面ではカレンダーなどで曜日や日にち間隔を確認しますよね。 この両者の不便さを解消する方法として、jQueryのプラグインである「jQuery UI」の1機能、「Datepicker」で解消できます。 Datepickerを使用することで、フォームへの日付入力の際、カレンダーを表示して入力補助をするインターフェースを、簡単に実装できます。 jQueryを用意するjQuery UIはjQueryのプラグインであるため、jQuery本体が必要となります。 jQuery本体の準備は以前「「CrossSlide」写真や
JavaScriptで、onsubmitの戻り値をfalseにしてフォームのsubmitを中断させる(実行しない)方法を紹介します。 1.onsubmitイベントとは onsubmitイベントは、フォームの送信ボタン(type属性がsubmitのボタン)がクリックされた時に発生するイベントです。 <form method="post" action="foo.cgi" onsubmit="foo();"> <input type="text" value="" /> <input type="submit" value="送信" /> </form> 2.submitを中断する(=フォームを送信しない)方法 onsubmitイベントを使ってsubmitを中断するケースとして、送信時にJavaScriptでフォームのチェックをして、フォームデータに未入力の項目がある場合、「return fa
jQuery Validation Plugin jquery.validate.js フォームのバリデーションにとても便利なjQueryプラグインですが、Ajaxを使った時にちょっとハマったのでメモ。 例えばユーザー名が使われているかチェックする時にクライアントサイドのチェックだけでは実装出来ないのでサーバに問い合わせる必要があります。 jQuery Validation Pluginではremoteを設定する事でデフォルトではonkeyup(一文字入力するごと)毎にサーバ側にリクエストしてチェックしてくれます。 コードサンプル ※Bootstrapを使っているのでCSSへの適応も考慮されています。 HTML <form id="join-form"> <div class="control-group"> <input id="username" name="username" typ
JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。
ページ読み込み時に実行するjavascriptは 指定方法がいくつも存在するため、 複雑になりやすく、度々エラーの原因になります。 【指定方法の種類】 ■onloadイベント ページ読み込み時に実行したい処理がある場合、 通常はjavascriptのonloadイベントを使用します。 BODY要素にonload属性を追加したり、 下記のようなjavascriptの指定を追加する方法がよく見られます。 window.onload = function(){ // ページ読み込み時に実行したい処理 } ■jQueryのreadyメソッド ライブラリとしてjQueryを使用している場合は、 readyメソッドを使用して、ページ読み込み時にjavascriptを実行することができます。 $(document).ready( function(){ // ページ読み込み時に実行したい処理 }); 【
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く