人力検索はてなの｢ｺﾒﾝﾄを書く｣ﾎﾞﾀﾝのように

について､ｴｯｾﾝｽを抽出してみました｡

 <div id="comment-show-btn" class="center"><input type="image" src="/images/comment-button.gif" value="ｺﾒﾝﾄを書く" onclick="$(this).parent().hide();$('#comment-form').show();$('#textarea-comment-content').focus();"></div>

 <div id="comment-form" style="display:none;">
 <label><textarea name="content" cols="60" rows="2" id="textarea-comment-content"></textarea></label>
 </div>

それほど難しいことをやっているわけではなくて､以下のようなことをやってます｡

• 書き込み欄の <textarea> もしくは､それを囲む要素のｽﾀｲﾙで display:none; を指定して､表示しないようにしておく
• ﾎﾞﾀﾝを押したｱｸｼｮﾝで､その要素を表示する (jQuery だと､.show())

それに加えて､細かい配慮でﾎﾞﾀﾝを消したり､入力領域にﾌｫｰｶｽを当てたり､なんてことをしています｡