ど素人から毛を生やす。<延>

javascript

Ajaxで403エラーを食らった原因がファイル拡張子だった話。

Web > javascript 2019年3月25日(最終更新:31日前)

どもです。
AjaxでデータをPHP処理しようとしたところ、403エラーになりました。

ForbiddenYou don't have permission to access /***/****/ajax.inc
on this server.

普段からAjaxを普通にやっているサーバーなので、パーミッションエラーというのは考えにくいのだけれど。

とか思っていたら、ファイルの拡張子が原因でした。

ajax.inc ... 続きを読む »

jQueryのイベント発火順を理解して、簡単に「それ以外を押したら閉じるサイトメニュー」を実装する。

Web > javascript 2019年3月20日(最終更新:1月前)

どもです。

HTML&CSSコーダーから離れて久しい僕ですが、久しぶりにまともにスマホ用ページを作ることに。
というわけでタッチで開閉するメニューを…

と思ったのですが、スマホ用ブラウザやアプリが使い勝手良く進化しているので、4年前の記事では不足。
具体的には「タッチで開閉するメニュー」に加え、「メニュー以外をクリックしたら閉じる」ようにしてやらないと、今どきは不親切です。

... 続きを読む »

inputに半角だけ入力させたい

Web > javascript 2018年10月10日(最終更新:4月前)

どもです。
フォーム回りは本当にブラウザ差異が活発極まりなく。

さて、まずはこの要望についてですが、
ブラウザ側での制御はいくらでも抜け道があるため、action側で全角⇒半角処理を行うのがBEST

という結論を前提に置いてから以下をご覧いただけると幸いです。

今回のテーマは、それでもブラウザ側で制御したい場合。
往々にしてそれはバックヤードなサイト的な、悪意を以てフォームを触る方が現れない閉鎖的なサイトであることでしょう。

そういったサイトの、作業の効率化やミスのリスクを減らすための入力制限を考察します。

HTML、CSSで制御する

IE、Edge、Firefox

一昔前、半角の入力制御といったらこれでした。ime-mode。
現在は公式に廃止される... 続きを読む »

text()で改行コードを含むテキストを取得、alert()とかconfirm()とかtextareaとかに出力したかった話。

Web > javascript 2018年8月3日(最終更新:8月前)

どもです。
jsのしょーもない話です。

PHPで改行コードを含むテキストをHTML上に出力、jsでそれを拾ってconfirm()に表示、ってやりたかった。

<p>このテキストを出力したい。\n改行もしたい。</p>

message = $("p").text();
alert(message);

「このテキストを出力したい。\n改行もしたい。」

なして改行コードのまま出力されてしまうんじゃぁああ(T_T)

この疑問を解決してくれたのが、こちらのYahoo!知恵袋の投稿

えーっと、つまるところ、... 続きを読む »

jsでforeachがやりたいとき、jQueryが使えるなら$.map()がそれっぽい?

Web > javascript 2018年5月2日(最終更新:20日前)

どもです。

jQeryの$.map()って、普段は$("input").map(function(){})みたいに
要素をループさせるのにばかり使っていたのですが、foreach的な使い方ができたんですね。

$.map(array, function(value, key){ })

こーすると。

しかもこのarrayのところ、オブジェクトでもOK。つまり連想配列OKです。やったぜ。

このとき、thisとvalueは同じものが入るので、セレクタとして使いたいときは$(this)でも$(value)でも可。... 続きを読む »

endsWith()って超イイ感じだけどIEの野郎が非対応なんだって!

Web > javascript 2018年4月20日(最終更新:1年前)

どもです。

jsで後方一致が使いたいがために、endsWith()を使いました。
そうしましたところ、

( ゚Д゚)「endsWith()はIEが対応してないから、作り直して!」

(*'ω'*)「今時IEなんて対応して誰が得するんだよォオオオオオオ!!!」

これだと[target].endsWith(str)⇒endsWith([target], str)になるのが痛いですが、仕方ない。

あと今回要らなかったのでパラメータにも対応してないです。つら。

なんとか最小限の変更で回避。IEつら…

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった
... 続きを読む »

動的に増やしたhtml要素を操作するjQueryに関するメモ書き

Web > javascript 2018年3月23日(最終更新:1年前)

どもです。

jsで動的に増やしたhtml要素を操作するjQueryに関して、今更感漂うメモ書き。
何かあったら都度増えます。たぶん。

.click()は効かない。.on()を使う。

追加された要素は、.click()、.change()などの古いトリガーの書き方ではトリガーにならない。

ただし、map()などはトリガーではないので、そのまま使える。混同しないこと。


参考サイト:[Qiita]jQuery 便利なonを使おう(on click)

data()はhtmlを書き換えられない

なんでさ。

ネイティブの.datasetか、.attr()を使うべし。旧ブラウザを踏まえたら.attr()が無難か。結局.attr()が万能。


参考サイト:[Qiita]data属性を動的に変更する場合の注意点... 続きを読む »

ステップ操作のトリガー扱いにブラウザ差異があるのでinput[type=number]を使う際は注意。

Web > javascript 2018年3月2日(最終更新:9月前)

どもです。
最近フォーム回りとSQLの話しかしてない気がする。

input[type=number]のフォーム操作について。

入力の数値に変更があった場合は再計算、という簡単なソースを作成したのですが、
Chromeでは正常に動いたのにFireFoxでは上手くいかず。

この原因が、トリガーにonBlurを使用したことでした。
どうやらChromeでは入力欄の上下矢印(ステップ)の操作はフォーカスが当たった扱いになるのですが、FireFoxではそうならないようです。

今回は矢印で操作したいので、onChangeに変更。

うーん、ブラウザ差異は発覚しにくいから厄介だ。(-_-メ)

onChange、発火したりしなかったりするよ!?(追記)

検証結果:
FF→発火する
Chrome→発火したりしなかったりする(3回に1回くらい発火する)
edge→発火しない
IE11→発火しない... 続きを読む »

古いjQueryでform制御したらsubmitできない、または「s[y] is not a function」になったとき。

Web > javascript 2018年2月6日(最終更新:1年前)

どもです。
jQueryでフォームを制御していたら、submitできない事案が。
コンソールに「TypeError: s[y] is not a function」というエラーが発生しています。

このエラー自体は「関数でないものを、関数呼び出ししようとした際に発生するエラー」らしいです。
詳細はMDNへのリンクを貼っておきます。

結論から言えば、今回の原因は2つ。

ひとつは、使用していたjQueryが古かったことに起因します。なんと1.8.3。このご時世に1系です。... 続きを読む »