jquery 预览_jQuery评论预览

矫情吗；* 2023-02-21 14:30 3阅读 0赞

jquery 预览

I released a [MooTools comment preview][] script yesterday and got numerous requests for a jQuery version. Ask and you shall receive! I'll use the exact same CSS and HTML as yesterday.

我昨天发布了[MooTools评论预览][MooTools comment preview]脚本，并收到了许多有关jQuery版本的请求。 问你应接受！ 我将使用与昨天完全相同CSS和HTML。

[View Demo][] [观看演示][View Demo]

## XHTML **(**The XHTML**)** ##

<div id="live-preview-form" class="lp-block">
    	<p>
    		<strong>Your Name:</strong><br />
    		<input type="text" name="name" id="name" value="" class="input" /><br /><br />
    		<strong>Your Email:</strong><br />
    		<input type="text" name="email" id="email" value="" class="input" /><br /><br />
    		<strong>Your Website:</strong><br />
    		<input type="text" name="website" id="website" value="" class="input" /><br /><br />
    		<strong>Your Comment:</strong><br />
    		<textarea name="comment" id="comment" class="input" rows="10"></textarea>
    	</p>
    </div>
    
    <div id="live-preview-display" class="lp-block">
    	<div id="lp-avatar"></div>
    	<div id="lp-name"></div>
    	<div id="lp-comment"></div>
    </div>

## CSS **(**The CSS**)** ##

.lp-block		{ width:400px; float:left; }
    .lp-block input, .lp-block textarea { width:90%; }
    #live-preview-display 	{ background:#eee; padding:10px; margin-left:50px; margin-top:20px; }
    #lp-name { font-weight:bold; }
    #lp-avatar { float:right; margin:0 0 20px 20px; }
    #lp-comment { padding-top:10px; font-style:italic; line-height:19px; }

## jQuery JavaScript **(**The jQuery JavaScript**)** ##

$(document).ready(function() {
    	var commentNode = $('#lp-comment'),
    		nameNode = $('#lp-name'),
    		name = $('#name'),
    		website = $('#website');
    	
    	//comment...easy
    	$('#live-preview-form input, #live-preview-form textarea').bind('blur keyup',function() {
    		//comment
    		commentNode.text($('#comment').val());
    		commentNode.html($('#lp-comment').html().replace(/\n/g,'<br />'));
    		
    		//name & websites
    		if($('#name').val()) {
    			if(website.val() && /http:\/\/[A-Za-z0-9\.-]{3,}\.[A-Za-z]{2}/.test(website.val())) {
    				nameNode.html('<a href="' + website.val() + '">' + name.val() + '</a> says:');
    			}
    			else {
    				nameNode.text(name.val() + ' says:');
    			}
    		}
    		
    		//gravatar
    		if($('#email').val() && /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test($('#email').val())) {
    				var md5Email = MD5($('#email').val());
    				$('#lp-avatar').html('<img src="http://www.gravatar.com/avatar.php?gravatar_id=' + md5Email + '&size=80&rating=G&default=http%3A%2F%2Fdavidwalsh.name%2Fwp-content%2Fthemes%2Fdavid-walsh%2Fgraphics%2Fcom.jpg" alt="' + $('#lp-name').val() + '" />');
    		}
    	});
    });

On the keypress and blur events, we validate and format the commenter's name, avatar, website, and comments as necessary. As with yesterday's MooTools post, the MD5 function can be found [here][].

在按键和模糊事件上，我们会根据需要验证并设置评论者的姓名，头像，网站和评论的格式。 与昨天的MooTools帖子一样，可以在[此处][here]找到MD5功能。

[View Demo][] [观看演示][View Demo]

Too easy!

太容易了！

> 翻译自: [https://davidwalsh.name/jquery-comment-preview][https_davidwalsh.name_jquery-comment-preview]

jquery 预览

[MooTools comment preview]: https://davidwalsh.name/comment-preview
[View Demo]: https://davidwalsh.name/demo/jquery-live-preview.php
[here]: http://www.webtoolkit.info/javascript-md5.html
[https_davidwalsh.name_jquery-comment-preview]: https://davidwalsh.name/jquery-comment-preview