留言或回复时常常会用到类似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
分享到：
相关推荐
本文将深入探讨如何在PHP留言板系统中实现表情添加，以及提供一段非常有用的PHP代码作为参考。 首先，我们需要理解表情的实现方式。在网页应用中，常见的表情处理方法有两种：静态图片和Unicode字符。静态图片通常...
在这个特定的项目中，“asp.net简易留言板 表情加文字”是一个利用ASP.NET技术实现的互动交流平台，它不仅支持用户发表文字留言，还增加了表情功能，使用户的表达更加生动有趣。 首先，我们要理解ASP.NET中的页面...
通常，这样的文件会包含实现留言板功能的各种组件，如HTML页面用于用户交互，CSS样式文件用于美化界面，JavaScript或jQuery脚本处理表情显示和用户输入，以及可能的服务器端脚本（如PHP、Python或Node.js）处理数据...
本文将深入探讨这三种技术在实现"留言表情"功能中的应用。 首先，JavaScript是一种轻量级的解释型编程语言，主要用于网页和网络应用的动态化。在"留言表情"功能中，JavaScript负责处理用户的输入行为，例如监听键盘...
本教程将深入探讨如何使用Dreamweaver来实现一个简单的留言板系统。 首先，我们需要了解留言板的基本构成。一个基本的留言板通常包括用户提交留言的表单、显示留言列表的页面以及后台处理留言的服务器端脚本。在...
【PHP简易留言板】是一个基础的Web应用程序，它利用PHP编程语言和数据库技术实现了一个互动的用户交流平台。在这个系统中，用户可以进行登录操作，并且能够发布包含文本和图片的表情消息。下面将详细阐述该系统的...
5. **face**：这个名字可能是图片或表情库的文件夹，用于在留言中插入或选择表情，增加互动性。 综合以上分析，这个基于PHP的留言系统通过不依赖数据库，实现了一种轻量级、易于部署的解决方案。尽管它可能在某些...
4. **表情选择**：实现简单的表情选择，可以使用图片列表控件展示表情，选择的表情可以作为字符串保存，显示时再转换为对应的图像。 以下是具体实现步骤： 1. **创建Windows Forms项目**：在Visual Studio中新建一...
本项目“简单的留言系统”旨在展示一个基础的实现，帮助初学者理解此类系统的核心概念和技术架构。 1. **系统架构** 在线留言系统的架构通常包含前端用户界面、后端服务器处理和数据库存储三部分。前端负责用户...
总的来说，ASP.NET表情插件是通过jQuery实现的，具有良好的跨浏览器兼容性，适用于创建互动性强的社交功能，如留言板、说说或微博。它通过引入常见的QQ表情，提升了用户体验，使得用户可以方便地在网页上表达情感，...
在线实时更新留言板就爱你就诶 ...软件包含一个简单的示例留言板，你可以通过简单的修改，即可直接进行使用。 软件使用平面文件数据库，无需mysql。 在线实时更新留言板页面展示 相关阅读 同类推荐：站长常用源码
【PHP简单留言板单页php源码】是一种基于PHP语言实现的简单在线交流工具，它允许用户在网页上发表留言并查看其他人的留言。这个源码主要用于教学和初级开发者熟悉PHP编程，了解基本的表单提交、数据处理以及动态网页...
本项目通过PHP与MySQL结合的方式实现了一个简单的在线留言板系统。该系统具备基本的用户留言功能，并且能够进行留言管理。整个项目的实现分为以下几个步骤：创建数据库及表、数据库连接文件编写、页面头部设计、留言...
一个简单的 JSP 留言板通常包含以下功能： - **用户提交留言**：用户可以填写留言内容，并选择发布。 - **显示留言列表**：展示所有留言的列表。 - **分页显示**：由于可能有大量留言，因此需要通过分页机制来提高...
本项目是一个简单易用且具有特色的留言板，它模仿了空间留言板的设计，提供了特殊表情和字体大小调整等功能，提升了用户的互动体验。 【描述】：“一个很好使用的、耳目一新的留言板，看过空间的留言板吗？特殊的...
根据提供的文件信息，本文将对“留言板简单的和复杂的”这一主题进行深入解析，重点在于理解两种不同复杂度的留言板代码实现方式及其应用场景。 ### 一、简单与复杂留言板的概念 在软件开发领域，留言板通常指的是...
此外，表情选择功能的实现通常涉及到动态加载和展示表情图片。可以创建一个隐藏的容器，当用户点击表情图标时，将其复制到输入框中。这可以通过监听表情图片的点击事件，并设置输入框的值来实现。 最后，为了提高...