久しぶりにやったら
やることいろいろあったのでメッも
やることいろいろあったのでメッも
formタグに onsubmitでreturn false →デフォルトのバリデーションはされるが、送信は行われない
ボタンにonclickかonsubmitでJS制御を追加
【JavaScript入門】submitイベントで入力フォームの送信処理をする | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト
のび太スニペットくれよ〜と言わんばかりにネットで探す。
さいしょにめっけたやつ
円形、フラット、フリップ……3種類のトグルスイッチをCSSのみで作成する方法!|SeleQt【セレキュト】
結局コレ参考にしたよってやつ
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
【jQuery入門】checkboxのchecked設定や取得まとめ! | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト
input 要素の disabled 属性と readonly 属性の違い: 小粋空間
http://www.koikikukan.com/archives/2009/04/26-003300.php
inputがdisabledの時のCSSを指定する | CloudAdvisor
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
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
デフォルトの表示がぜんぜんちがうからカスタマイズしづらいんだよって説明するときに便利
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/
$(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"}); }); });
autocapitalize属性は、フォームでテキスト入力する際、文頭の文字を自動的に大文字にするかどうかを指定する。英語圏では便利な機能かもしれないけど、日本で使用する場合はあまり使わない。しかも、ログインIDを入力するようなときにも困ってしまう。自動大文字入力機能をOFFにするには、該当のinputタグもしくはtextareaタグに次のように設定する。 view plainprint? 1.
iPhoneのSafariでフォームにメールアドレスを入力する際にキーボードを変更する属性の指定方法
同様にアンドロイドでも効くらしい。
ただしアンドロイド1.6の初期エクスペリアでは効かなかった
iPhoneのSafariで電話リンクをつけないmeta指定
http://symple.jp/93.html
ボーダーとバックグラウンドを変更すればよい
border: #e9b85e 1px solid; background: #e9b85e;