HTML: JavaScript で書き換えられる前のソースコードを取得

ページ読み込み時に JavaScript が HTML の内容を書き換えることで、
広告や Twitter のタイムラインを表示するページが多くある。

サイトの移植などで、元のファイルに直接アクセスできず、
ブラウザのデバッグツールで HTML 等をコピーしてくる場合、
JavaScript の使用をOFFにした状態でデバッグツールから HTML を取得すると、
JavaScript で書き換えられる前の元のソースコードを取得することができる。

広告や Twitter タイムラインなど、
読み込み直後に書き換えられるページを移植する場合に便利。

フレーム内でリンクした時にブラウザ全体を遷移させる

<iframe> や <frame> の内部でリンクを踏むと、
フレームの中身だけが書き換わる。

フレームを含む親も含めて丸ごと遷移して欲しい場合は、
<a> 要素の target 属性に _top を指定すれば良い。

<a href="http://yokano-jp.blogspot.jp/" target="_top"></a>

<td> を丸ごと <a> でリンクにする

テーブルのセルを丸ごとリンクにする場合は少しコツが要ります。

そのまま囲むと動かない

<table style="width: 200px; height:200px;">
    <tr>
        <a href="http://yokano-jp.blogspot.jp/">
            <td>まるごとリンク</td>
        </a>
    </tr>
</table>

--
追記：2018/01/04
そもそも tr の下には、th または td しか置けないため、
上記のコードは HTML として誤りです。
参考：https://www.w3.org/TR/2017/REC-html52-20171214/tabular-data.html#the-tr-element
--

セル内を覆う <a> を <td> の直下に入れると動く

<table style="width: 200px; height:200px;">
    <tr>
        <td>
            <a style="width:100%; height:100%; display:block;" href="http://yokano-jp.blogspot.jp/">
                まるごとリンク
            </a>
        </td>
    </tr>
</table>

<a> に幅・高さを設定するため display:block; でブロック要素にしています。

ただし、セル内のコンテンツにリンクの色や下線が付くので、
text-decoration や color などで別途スタイルの修正が必要になります。


参考
テーブルのtd全体にリンクをかける | ホームページ作成の備忘録
http://ppaso.net/archives/430

HTML: テキストフォームの入力文字数制限

<input> 要素の maxlength 属性で入力できる文字数制限を設定できる。



the maxlength attribute - W3C
http://www.w3.org/TR/html5/forms.html#the-maxlength-attribute

W3C の HTML バリデーションチェック

W3C が提供しているマークアップバリデーションツールでは、
HTML や XHTML などのマークアップの文法の誤りや
リンク切れなどをチェックすることができます。

Markup Validation Service | W3C
http://validator.w3.org

通らなくても動くのですが、
気にする人は気にするのでたまにチェックしてみると良いかと思います。

ラジオボタンのデザインを変える

HTML のラジオボタンのデザインを画像に変える方法として、
<label> を使う方法があります。

デモ
http://yokano.jp/demo/radio/


まず、ラジオボタンを作ります。

<label><input name="default" type="radio" checked>: A</label>
<br>
<label><input name="default" type="radio">: B</label>

<label> 要素に適当なクラスを設定します。
CSS で設定したクラスの下に入っている <input> 要素を非表示にします。

<label class="radio"><input type="radio" checked>: A</label>
<br>
<label class="radio"><input type="radio">: B</label>

ラジオボタンの画像を作成します。

<label> 要素の背景画像として設定します。
チェックされている <input> 要素を持っている<label>に "on"
チェックされていない <input> 要素を持っている<label>に"off"
というクラスを設定しています。
CSS でそれぞれのクラスの background-image を設定することで
ON / OFF を表現します。
jQuery で設定します。

// JavaScript
$('.radio').each(function() {
    if($(this).find('input').is(':checked')) {
        $(this).removeClass('off').addClass('on');
    } else {
        $(this).removeClass('on').addClass('off');
    }
});

/* CSS */
.radio {
    width: 17px;
    height: 17px;
    padding-left: 20px; /* 画像を表示するために左側を開ける */
    background-repeat: no-repeat;
}

.radio.on {
    background-image: url("img/on.png");
}

.radio.off {
    background-image: url("img/off.png");
}

最後にクリックされた時にラジオボタンを切り替える処理を JS で追加します。

$('.radio input').on('change', function() {
    $('.radio').removeClass('on').addClass('off');

    if($(this).is(':checked') {
        $(this).parent().addClass('on').removeClass('off');
    }
});

以上で完了です。


参考
jQuery 簡単！チェックボックスやラジオボタンを装飾する方法（プラグイン不要） | Stronghold
http://zxcvbnmnbvcxz.com/form-improvement-2-7/

特定のイベントで form を送信する

通常は <form> 要素の中に <input type="submit"> を設置し、クリックされたらフォームを送信するという流れになっていると思います。
submit ボタンを押す以外ののイベントから送信する場合は、送信ボタンを隠して JavaScript からクリックイベントを発行するという方法があります。
下の例ではボタンクリックですが、その他のイベントでも同じように処理できます。

HTML 要素にマウスを載せた時に表示されるコメント

title 属性を設定すればマウスカーソルを重ねた時に表示されるコメントを設定できます。

<div title="コメント"></div>

jQueryで画面を暗くして操作できなくする

黒い半透明な <div> でコンテンツを覆ってクリックイベントを通さないようにできます。

ゲームのイベント中やメッセージ送りを待っている時など、

画面を暗くして操作できないようにしたい場合があります。

１つの手段として半透明な黒い <div> でコンテンツを覆い隠す方法があります。

一時的にコンテンツのクリックを不可能にするサンプルを作成しました。

サンプルアプリ

http://okanoworld.appspot.com/sample/html5/busy/index.html

ソースコード

https://github.com/yokano/sample/tree/master/html5/busy

黒くて半透明な <div> をコンテンツの上に表示しています。
z-index でコンテンツよりも上に <div> を表示し、
jQuery から CSS の visibility の visible/hidden を切り替えています。

input タグだけを FormData として送信したいとき

以前の記事で、<form> 内の <input type="file"> を Ajax で送信する方法を書きました。

    jQuery.ajax() でファイルを送る
    http://yokano-jp.blogspot.jp/2013/07/jqueryajax.html

FormData のコンストラクタには <form> を渡す必要があります。
基本的には <form> で <input> を囲んでおくべきですが、
<form> で囲まれていない <input> をどうしても送りたい場合には、
JavaScript の内部で <form> を作成して送る方法もあります。

HTML

<input id="file" type="file">

JavaScript

var form = $('<form></form>').append($('#file'));
var formdata = new FormData(form.get(0));
$.ajax('/upload', {
    method: 'POST',
    contentType: false,
    processData: false,
    data: formdata,
    dataType: 'json',
    error: function() {
        console.log('error');
    },
    success: function(data) {
        console.log('blobkey', data.blobkey);
    }
});

HTML の親ページのスタイルは子フレームへは適用されない

実は知らなかったのでメモ。よく考えたら当然ですね。
フレームで参照している先のページのスタイルが変わってしまったら困りますから。

index.html

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>html test</title>
  <style>
   frame h1 {
    color: red;
   }
  </style>
 </head>
 <frameset>
  <frame src="frame.html"></frame>
 </frameset>
</html>

frame.html

<h1>This is frame</h1>
<p>frame</p>

godoc のテンプレートを作成している時に発見しました。