留言或回复时常常会用到类似QQ表情之类的效果，但是要想在textarea里面显示图片有一定的困难。我参考网上的资料做了这个简单的表情的添加和显示。
思路是：点击表情图片时，用javascript得到图片的名称并添加到textarea的内容里，php文件得到表单传递过的内容后利用str_replace()函数把分隔符替换相应的html标记。实现如下：
guestbook.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//得到图片名称并加入textarea的value中
function addEmot(obj) {
var val = document.getElementById('message').value;
document.getElementById('message').value = val + "[emot]" + obj + "[/emot]";
}
</script>
<style type='text/css'>
img {
border: 0 none;
}
</style>
<title>留言表情示例</title>
</head>
<body>
<form name='guestbook' method='post' action='post.php'>
<div>
message：
<div>
<textarea name='message' id='message' rows="5" cols="30"></textarea><br/>
<a href="javascript:addEmot('good');"><img src='images/good.gif'/></a>
<a href="javascript:addEmot('bad');"><img src='images/bad.gif'/></a>
<a href="javascript:addEmot('flower');"><img src='images/flower.gif'/></a>
<a href="javascript:addEmot('love');"><img src='images/love.gif'/></a>
<a href="javascript:addEmot('heartache');"><img src='images/heartache.gif'/></a>
<a href="javascript:addEmot('puke');"><img src='images/puke.gif'/></a>
<a href="javascript:addEmot('fear');"><img src='images/fear.gif'/></a>
<a href="javascript:addEmot('envy');"><img src='images/envy.gif'/></a>
<a href="javascript:addEmot('sad');"><img src='images/sad.gif'/></a>
<a href="javascript:addEmot('shy');"><img src='images/shy.gif'/></a>
</div>
<button type='submit' value='post'>post</button>
</div>
</form>
</body>
</html>
post.php:
<?php
$message = $_POST['message'];
//进行相应的替换
$temp = str_replace('[emot]', "<img src='images/", $message);
$emotions = str_replace('[/emot]', ".gif' />", $temp);
echo $emotions;
运行效果如下：
点击了第1个和第6个图片
点击post提交后：
显示的结果符合预期
- post.rar (243 Bytes)
- 描述: post.php
- 下载次数: 34
分享到：
相关推荐
C# 留言板 可以实现简单的留言和选择简单的表情！可以完成一个简单的课程设计要求 （可视化编程）
在线实时更新留言板就爱你就诶 ...软件包含一个简单的示例留言板，你可以通过简单的修改，即可直接进行使用。 软件使用平面文件数据库，无需mysql。 在线实时更新留言板页面展示 相关阅读 同类推荐：站长常用源码
在线聊天，通过ajax无刷新简易的实现聊天功能，简易自动回复，简易聊天表情等 留言功能，点赞功能等等 thinphp5的缓存应用，模型关联，等 增加在线安装功能 特性： 比较简单的实现商城功能，例如支付宝扫码...
在线实时更新留言板是一个可以通过实时更新留言来实现实时在线聊天功能的php留言板源码。...软件包含一个简单的示例留言板，你可以通过简单的修改，即可直接进行使用。软件使用平面文件数据库，无需mysql。
版本升级也没实现。本不想发布的，但出于很多朋友已经等悄悄话功能很久了，所以先放上来~希望大家继续支持本站，我会继续努力的。等这段忙完了，我会继续为更新本本的。 1)增加了悄悄话功能 2)修改了很多细节问题， ...
只有一个.php即可实现对留言本的显示，添加与删除，按照一定规则存储到.txt文本中，利用了数组将留言内容读取出来，整个留言板程序只有不到7K，源码也没多少行，还可以实现留言本的表情显示，主要是利用PHP的文件...
和之前的迹APP一样，我给颜艺Boy也提供了Arduino的库函数支持，可以让Arduino通过蓝牙读取人脸的表情、姿态、位置信息，库的使用非常简单，看示例代码就知道了。支持通过蓝牙输出人脸数据，开发板通过蓝牙串口读取，...
也会让访客感到更有乐趣的，实现这个功能很简单，可以直接安装插件或添加代码，那么，就看看Custom Smilie这款插件吧。 Custom Smilies的安装使用: 1.下载Custom Smilies插件，解压后，上传到plugin目录； 2.登录...
3.2 面向对象的C#实现 3.2.1 定义 3.2.2 创建一个类和其方法 3.2.3 类成员 3.2.4 构造函数和析构函数 3.3 对象的生命周期 3.3.1 类成员的访问 3.3.2 类的类型 3.3.3 .NET 的垃圾回收机制 3.4 使用命名空间 3.4.1 为...
基于ASP的网络聊天室的设计与实现 随着网络的逐渐普及，以及网络技术的不段发展，人们通过网络进行交流的方式变得多样化。网络聊天室便是其中之一。聊天室系统的即时交流方式满足了网络中多人同时聊天交流的需要，...
在线实时更新留言板是一个可以通过实时更新留言来实现实时在线聊天功能的php留言板源码。...软件包含一个简单的示例留言板，你可以通过简单的修改，即可直接进行使用。 软件使用平面文件数据库，无需mysql。
包括多人同时在线聊天、两人间的私密聊天、在发言的时候能够发送表情及图片，还能显示在线用户列表，同时，为了管理聊天室中的用户，设计了用户注册登陆功能，用户管理功能以及用户留言功能。并且，加入了分屏、清屏...
·集成讨论区，可作为留言版或简易论坛 ·首页、 分类、新闻、专题可生成静态页面 ·生成速度可在每分钟30页到2000页之间选择 ·首页静态文件自动定时生成 ·新闻采集功能，采集时可进行其它管理操作，采集规则...
3.2 面向对象的C#实现 3.2.1 定义 3.2.2 创建一个类和其方法 3.2.3 类成员 3.2.4 构造函数和析构函数 3.3 对象的生命周期 3.3.1 类成员的访问 3.3.2 类的类型 3.3.3 .NET的垃圾回收机制 3.4 使用命名空间 3.4.1 为...
3.2 面向对象的C#实现 3.2.1 定义 3.2.2 创建一个类和其方法 3.2.3 类成员 3.2.4 构造函数和析构函数 3.3 对象的生命周期 3.3.1 类成员的访问 3.3.2 类的类型 3.3.3 .NET的垃圾回收机制 3.4 使用命名空间 3.4.1 为...
3.2 面向对象的C#实现 3.2.1 定义 3.2.2 创建一个类和其方法 3.2.3 类成员 3.2.4 构造函数和析构函数 3.3 对象的生命周期 3.3.1 类成员的访问 3.3.2 类的类型 3.3.3 .NET的垃圾回收机制 3.4 使用命名空间 3.4.1 为...