Script
jQuery(function($){
$('dd').click(function(){
if(!$(this).hasClass('on')){
$(this).addClass('on');
var txt = $(this).text();
$(this).text('').append('<input type="text" value="'+txt+'" />');
$('dd > input').focus().blur(function(){
var inputVal = $(this).val();
if(inputVal===''){
inputVal = this.defaultValue;
};
$(this).parent().removeClass('on').text(inputVal);
});
};
});
});
HTML
<dl>
<dt>名前:</dt>
<dd>技評太郎</dd>
<dt>会社名:</dt>
<dd>技術評論社</dd>
<dt>役職:</dt>
<dd>WEBディレクター</dd>
<dt>得意:</dt>
<dd>jQuery</dd>
</dl>
Demo
- 名前:
- 技評太郎
- 会社名:
- 技術評論社
- 役職:
- WEBディレクター
- 得意:
- jQuery