jQuery hanzi2pinyin - fast hanzi to pinyin conversion - IE6+/Chrome/Firefox - GitHub / blogpost JavaScript to load:
input your text:
hyphen: punctuation marks:
case: fullwidth characters:
tones (available in hanzi2pinyin.all.js):


The results can be put into input, textarea, span or anything else:



String conversion is also supported:

上海自来水来自海上 =>

Code:

$('#js').change(function(){
	$('#head').html('Loading...');
	$('input,select,textarea,button').prop('disabled',true);
	$.getScript($('#js').val(),function(){
		$('#head').html($('<a />',{href:$('#js').val(),text:$('#js').val()}));
		$('#zh,#case,#hyphen,#pm,#fc,#tones').bind('keyup change',function(){
			$('#zh').hanzi2pinyin({
				target: '#py, #py2, #py3, #py4',
				'case': $('#case').val(),
				hyphen: $('#hyphen').val(),
				punctuation_marks: $('#pm').val(),
				fullwidth_chars: $('#fc').val(),
				tones: $('#tones').val()
			});
			$('#py5').text($('#sh').text().hanzi2pinyin({
				'case': 'proper',
				tones: 'standard'
			}));
			$('#code').text(".hanzi2pinyin({\r\n\ttarget: '',\r\n\t'case': '" + $('#case').val() + 
			"',\r\n\thyphen: '" + $('#hyphen').val() + "',\r\n\tpunctuation_marks: '" + $('#pm').val() + 
			"',\r\n\tfullwidth_chars: '" + $('#fc').val() + "',\r\n\ttones: '" + $('#tones').val() + "'\r\n}");
			$('input,select,textarea,button').prop('disabled',false);
		}).trigger('keyup');
	});
}).trigger('change');