カテゴリー
wp

Contact Form 7カスタム関連

久しぶりにやったら

やることいろいろあったのでメッも

条件分岐でフォームパーツ出し分け

カテゴリー
css

フォーム系memo jsで制御する場合にもhtml5デフォルトのバリデーションを機能させる

デフォルトのバリデーションを残すmemo

formタグに onsubmitでreturn false →デフォルトのバリデーションはされるが、送信は行われない
ボタンにonclickかonsubmitでJS制御を追加

【JavaScript入門】submitイベントで入力フォームの送信処理をする | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト

JavaScriptのsubmitイベントで、フォーム送信をコントロールしよう

カテゴリー
css

フォーム系memo cssトグルスイッチでフォームパーツを制御

チェックボックスでトグルスイッチ

のび太スニペットくれよ〜と言わんばかりにネットで探す。

さいしょにめっけたやつ
円形、フラット、フリップ……3種類のトグルスイッチをCSSのみで作成する方法!|SeleQt【セレキュト】

Webデザイナー必見!CSSだけで作るトグルスイッチ3種【丸スタイル・2択スタイル】

結局コレ参考にしたよってやつ
Simple CSS Toggle Switch — Create a toggle switch with only a checkbox
https://danklammer.com/articles/simple-css-toggle-switch/

最初に選んでから記事が読めて便利
CSS3 Toggle Switch Button – HTML Lion
https://www.htmllion.com/css3-toggle-switch-button.html

色んなデザイン
10 Free Customizable CSS Snippets for Radio Toggles & Switches – 1stWebDesigner

10 Free Customizable CSS Snippets for Radio Toggles & Switches

How To Create a Toggle Switch
https://www.w3schools.com/howto/howto_css_switch.asp

トグルスイッチと他のパーツのdisabledを連携させる

【jQuery入門】checkboxのchecked設定や取得まとめ! | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト

【jQuery入門】checkboxのchecked設定や取得まとめ!

input 要素の disabled 属性と readonly 属性の違い: 小粋空間
http://www.koikikukan.com/archives/2009/04/26-003300.php

inputがdisabledの時のCSSを指定する | CloudAdvisor

inputがdisabledの時のCSSを指定する

2014-04-11 1st – jsdo.it – Share JavaScript, HTML5 and CSS
http://jsdo.it/Yukimi.Sato/5y3C

jQueryでshow/hide, addClass/removeClass, disabledの切り替えを一行で書く
https://qiita.com/nmta/items/0f5c460d135c4f72dc4a

カテゴリー
js

Ajax通信と画像のアップロード

FormData使わなあかんのですね。。知らんかった。

jQuery Ajaxでファイルを送りたい! – かもメモ

processData: falseとcontentType: falseがポイントの様です。

new FormData()する時にformを渡してやると
form.submit();した時と同じ様に
フォーム内のデータがnameとvalueのセットでそのまま送信されます。

JavaScript – 【jQuery】FormDataの中身をコンソールで確認したい(59822)|teratail
https://teratail.com/questions/59822

フォームからファイルを選択した際に、submitする前にプレビュー表示する方法(jQuery版) – Qiita
https://qiita.com/kon_yu/items/f98df7ac826e7c36cc6c

$(function(){
  //画像ファイルプレビュー表示
  $('form').on('change', 'input[type="file"]', function(e) {
    var file = e.target.files[0],
        reader = new FileReader(),
        $preview = $(".preview");
        t = this;

    // 画像ファイル以外の場合は何もしない
    if(file.type.indexOf("image") < 0){
      return false;
    }

    reader.onload = (function(file) {
      return function(e) {
        $preview.empty();
        $preview.append($('<img>').attr({
                  src: e.target.result,
                  width: "150px",
                   class: "preview",
                  title: file.name
              }));
      };
    })(file);

    reader.readAsDataURL(file);
  });
});

あとひさびさ
JavaScriptメールアドレスチェッカー: 小粋空間
http://www.koikikukan.com/archives/2014/09/18-003333.php

カテゴリー
css 私生活ログ

デザイナーさんに説明 フォームのファイルアップロード

デフォルトの表示がぜんぜんちがうからカスタマイズしづらいんだよって説明するときに便利
http://www.quirksmode.org/dom/inputfile.html

あと、jsで制御する方法
あとで見る
http://zxcvbnmnbvcxz.com/input-typefile-%E3%82%92%E7%94%BB%E5%83%8F%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AB%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/

カテゴリー
js

フォームのtextareaデフォルト文字を表示非表示

	$(function(){
		$("#freetxt").css( {color: "#c0c0c0"});
		$("#freetxt").focus(function(){
			if($(this).val() == 'ここに文章を書いてください')  $(this).val('');
			$(this).css( {color: "#2a2a2a"});
		  });
		$("#freetxt").blur(function(){
			if($(this).val() == '')  $(this).val('ここに文章を書いてください').css( {color: "#c0c0c0"});
		  });
	});

iPhoneの自動大文字入力機能-autocapitalize属性について

http://symple.jp/93.html

autocapitalize属性は、フォームでテキスト入力する際、文頭の文字を自動的に大文字にするかどうかを指定する。英語圏では便利な機能かもしれないけど、日本で使用する場合はあまり使わない。しかも、ログインIDを入力するようなときにも困ってしまう。自動大文字入力機能をOFFにするには、該当のinputタグもしくはtextareaタグに次のように設定する。 view plainprint? 1.

iPhone-Safari フォームの内容に合わせてデフォルトキーボードを変更

iPhoneのSafariでフォームにメールアドレスを入力する際にキーボードを変更する属性の指定方法

iPhoneのSafariでフォームにメールアドレスを入力する際にキーボードを変更する属性の指定方法

同様にアンドロイドでも効くらしい。
ただしアンドロイド1.6の初期エクスペリアでは効かなかった

http://symple.jp/119.html

iPhoneのSafariで電話リンクをつけないmeta指定
http://symple.jp/93.html

カテゴリー
css

iphone用ラジオボタンの装飾

ボーダーとバックグラウンドを変更すればよい
border: #e9b85e 1px solid; background: #e9b85e;