javascript

javascriptで改行を含んだ正規表現

text.match(/[\s\S]*/); [\s\S]は改行を含む任意の一文字ということになる複数行にマッチさせる正規表現 | You Look Too Cool

jqueryのセレクタの第2引数の意味

var ele = $('#id', var_html); $()の第2引数にhtmlエレメントを指定すると、#idの検索対象をそのhtmlに設定することができる $(var_html).find('#id') これも同じ意味ぽい

jqueryによる行追加方法

これもしょっちょうやるのにメモするのを面倒臭がって結局毎回調べることになるので今度こそメモ。例えば以下の様な感じで、行追加ボタンを押す度に最後の行をベースにtrを追加したい場合。html <table id="itemTbl"> <tr> <th>名称</th> <th>金額</th> </tr> <tr> <td><input type="text" name="item_name[]" value="<?php e(h($v['name']));?>" /></td> <td></td></tr></table>

jquery-uiのdialogを閉じる度にoverlayが伸びていく現象の対応策

最近のjquery-uiだと治っていたかもしれないけど、古いjquery使う時に毎回調べているので今度こそメモ。 close: function() { // 閉じる度にoverlayが高くなるのを防ぐ $('.ui-widget-overlay').css('position', 'absolute'); }, open: function() { // 閉じ…

jqueryでメッセージを徐々にフェードアウトする方法

例えばid="success"のタグを徐々にフェードアウトさせたい場合、以下で出来る。 $(document).ready(function() { // まず現在のアニメーションを停止(stop) // 1.2秒かけてフェードイン(fadeIn) // 2.5秒待機(delay) // 3.0秒かけてフェードアウト(fadeOut) …

ファイルアップロードのデザイン変更方法

ファイルアップロードのデザイン変更って面倒だと思っていたけど、案外すっきり出来た。 以下、参考にした丁寧にまとまっている記事↓【jQuery】ファイル選択フォームデザインのカスタマイズ方法 | WebTerminalこれで一件落着と思いきや、案の定IEがダタをこ…

fancyboxが便利だった件について

ちょいちょいjquery UI使ったフロート表示内でpostをしたい時がある。LightBoxとかあーいう画面内で遷移させるってことね。その際に今までは全部ajaxでちまちまやっていたけど、これだとサーバーサイド側の処理とかも含めて、結構面倒くさかったりする。fanc…

javascriptで数字以外は削除する方法と注意事項

なんでjavascriptって覚えられないんだろう。 俺がアホ過ぎるんだろうか?いや違う。単に努力が足りていないだけだ。 努力不足を自分の才能のせいにするなんて、クズもいいとこだな。 var str = ('03-5555-4444').replace(/[^0-9]/g, ''); // 0355554444 【…

jqueryのblurとchangeの違い

selectタグが変更した時に何かしらの処理を実行したい時などにjqueryのchangeメソッドを使うんだけど、textボックスに対してchangeを使った場合は、フォーカスが外れた時に実行されることになる。同じような関数にblurがあるけど、こちらもフォーカスが外れ…

入力・ペーストした際に先頭・語尾の半角・全角スペース削除

$("#keyword").on('keyup', function(e) { if ($(this).val().match(/^( | )+|( | )+$/g)) { $(this).val($(this).val().replace(/^( | )+|( | )+$/g, '')); } }).on('paste', function(e) { var keyword = this; setTimeout(function () { $(keyword).val($…

javascript使う時はシングルクォーテーションに注意

文字列にシングルクォーテーションが入っているとjavascript使うときに色々と弊害が起きるので、エンティティの&#039;(実際は小文字)に置換すること。ちなみにシングルクォーテーションには実体参照が存在しない。(ダブルクォーテーションは&qout;)あ…

Firefoxでhistory.backした時の挙動をIEやChromeに合わせる方法

知らなかったのでメモ。 例えば、入力→確認画面と遷移するときに、入力画面でボタンをdisabledにして移動し、確認画面でhistory.backで戻ったケース。 ieやchromeなら戻った画面でも普通にボタンを押せるんだけど、ffだとdisabledのままになってしまう。 ff…

javascriptの数値変換について

基本的なことだけど忘れていたので書く。例えば以下の場合。javascript var num = $("#test").val() + 1; alert(num); html <input type="hidden" value="1" id="test" /> 結果は以下のようになる11文字列を数値として解釈したいのであれば以下のようにする var num = parseInt($("#test").val()) + 1; a…

JSON.parse が駄目なら eval でいいじゃない

cakephpでjson返してjavascriptで JSON.parse するとparseエラーが出た。別の環境だとうまくいくのに。phpのバージョンとかjqueryのバージョンも関係なさそう。理由がさっぱり分からん。上手くいかないケースはタブが\tでなかったり、/がエスケープされてな…

ajaxの際に form.serialize で一括送信できる件

今までバカな事していた。ajaxでpostとかgetする際に、いちいち各inputの値とかを取得していたんだけどそんなことしなくてもform.serializeで一発だった。javascript function postForm(btn) { $.ajax({ type: "post", url: "/test.php", data: $(btn.form).…

javascriptを非同期で読み込む方法

郵便番号から住所を表示してくれる外部ライブラリのjsを利用しているんだけど、たまに読み込むのに時間がかかって画面の表示が遅くなる時があった。 で、調べてみたところ非同期で読み込む方法があったらしい。 方法は単純でscriptタグに async="async" を追…

juqery-uiのdatepicker使うときのバージョンについて

jqueryが1.3.2より新しい場合は、jquery-uiを1.8.9より新しいバージョンにしないといけないらしい。ちなみにdatepicker使う際は、下記4つがあればOK ・jquery.js ・jquery-ui.js ・jquery.ui.datepicker-ja.js(日本語対応用) ・jquery-ui.css jqueryとjquer…

IE9 で jquery ui がドラッグ出来ない件

jquery 1.7.2 jquery-ui 1.8.20にしたらIE9でもドラッグ出来たjquery 1.4.3 jquery-ui 1.8.6以上であればこのバグが改修されているらしい参考サイト jQuery UI does not work on IE9... - jQuery Forum

ajaxでクロスドメイン接続する方法

忘れていたのでメモ。 以下の様な感じでdataType: 'jsonp' と callback=? を指定する。 (callbackの値はjqueryが勝手に付与してくれる) var url = 'http://crossdomain.jp?callback=?'; $.ajax({ type: "get", cache: false, url: url, dataType : 'jsonp', …

HTMLのクリアと削除

HTMLをクリアしたいときはempty 削除したい場合はremove $("#test").empty(); // divは残る $("#test").remove(); // divもまるごと削除 <div id="test"> <p>今日も晴れ</p> </div>

jsのオブジェクトのループ

JSONなどのオブジェクトをループしたい場合は、for in で。 obj={"A":"あ","B":"い"} for ( a in obj ){ alert( a ); //キー名 A , B を表示 alert( obj[a] );//値 あ , い を表示 }

textareaを改行で分割したい場合

// windows,mac,linuxの改行コードに対応 var lines = $("textarea").val().split(/\r\n|\r|\n/); for (var i = 0; i < lines.length; i++) { alert(lines[i]); }

スマホサイトでのクリップボードへのコピーについて

jsなら以下のコマンドでクリップボードへのコピーができるが、現状IEしか動作しない。document.execCommand("copy");ZeroClipboardというjqueryフレームワークを使えばflashが動く端末で動作するが、激重い。。(P01Dでカクつくレベル)何か有効な手立てがある…

# はそのページで一回しか使われないことが確定している場合しか使ってはいけない

もう何回これで過去にはまって時間を無駄にしただろう。 今日も2時間無駄にした。HTMLで id="xx" のタグを定義して、jquery側でいくら頑張っても操作がうまくいかない。 今回はjqueryの初めて使うフレームワークだったこともあって、そっちのほうにばかり気…

this.formで自分のフォームを参照

忘れないようにメモ(といっても絶対忘れるだろうけど)this.formを使えば自分のフォームを参照できる(ただしAタグでは無理)複数フォームがある場合など便利 <form target="win" action="test.html" method="post"> <input type="button" onclick="openwin(this.form)" value="送信" /> </form> <script> function openwin(form){ window.open("","win"); form.submit(); } </script>

郵便番号から住所検索するjQueryライブラリ

今までajaxzip3を使っていたけど、たまにjsの読み込みが遅いときがあって、違うのを探してみたところ、jQuery.zip2addrというライブラリを発見。 これの特徴は、 ・Google日本語入力APIを使っている ・httpとhttpsを気にしなくて良い ・導入がとにかく簡単 …

jqueryの配列検索は$.inArray で行う

Array.indexOf はIEでは動かないため、 jquery環境なら$.inArray(value, array) を使うこと 見つからない場合は -1 を返す

ボタンを押してdisabledにする際の注意点

IEだと以下のボタンがサブミットされない type="submit" onclick="$(this).attr('disabled', 'disabled')" 下記のようにすること type="button" onclick="$(this).attr('disabled', 'disabled');$('#form').submit();"

jquery.uploadの功罪

jquery.uploadの良い点・悪い点 良い点 ・ajax上でファイルアップロードが出来るためとても便利 ・レスポンスをtext/htmlにすればIEでも使用可能 ・uploadメソッドでフォーム上のデータを一発postできる 悪い点 ・レスポンスをtext/htmlにすると結果のHTMLが…

jsのmatchコマンドによる結果の取得について

文字列のマッチングの結果を得る方法 ↓で()の一つ目の結果が取得できる var str = ($(this).text().match(/([^\s]+)\s*/)||[])[1]; 参考サイト http://d.hatena.ne.jp/koseki2/20090530/JsIdiom