js如何简单实现汉字转成拼音的功能

　　最近项目需要一个功能，实现汉字转拼音功能，具体比如说输入一个“你好”，同时带出对应拼音“NiHao”，在此做一下记录

1、首先引入两个文件

    <script src="jquery.min.js"></script>

    <script src="Convert_Pinyin.js"></script>

2、html设计

 <body>

        <div>

             输入名称：<input type="text" id="chinaName"  onBlur="ConvertName()" />  <br/>

             全写拼音：<input type="text" id="fullName" /> <br/>

             简写拼音：<input type="text" id="easyName" /> <br/>

        </div>

 </body>

3、js方法

<script>

       var ConvertName = function(){

            var chinaName = $('#chinaName').val();

            //获取全写拼音（调用js中方法）

            var fullName = pinyin.getFullChars(chinaName);

            //获取简写拼音（调用js中方法）

            var easyName = pinyin.getCamelChars(chinaName);

            //给两个文本框赋值

            $('#fullName').val(fullName);

            $('#easyName').val(easyName);

       }

</script>

4、实现效果

aaarticlea/png;base64,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" alt="" />aaarticlea/png;base64,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" alt="" />

5、整体demo

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>如何实现汉字转拼音功能</title>

    </head>

    <script src="jquery.min.js"></script>

    <script src="Convert_Pinyin.js"></script>

    <script>

        var ConvertName = function(){

            var chinaName = $('#chinaName').val();

            //获取全写拼音（调用js中方法）

            var fullName = pinyin.getFullChars(chinaName);

            //获取简写拼音（调用js中方法）

            var easyName = pinyin.getCamelChars(chinaName);

            //给两个文本框赋值

            $('#fullName').val(fullName);

            $('#easyName').val(easyName);

        }

    </script>

    <body>

        <div>

             输入名称：<input type="text" id="chinaName"  onBlur="ConvertName()" />  <br/>

             全写拼音：<input type="text" id="fullName" /> <br/>

             简写拼音：<input type="text" id="easyName" /> <br/>

        </div>

    </body>

</html>

6、汉字转拼音js下载路径：

链接：https://pan.baidu.com/s/1NZ4noIgHv2HSzZW6yBRTxA 密码：2kv1

js如何简单实现汉字转成拼音的功能的更多相关文章

Android 实现ListView的A-Z字母排序和过滤搜索功能，实现汉字转成拼音
转载:http://blog.csdn.net/xiaanming/article/details/12684155 转载请注明出处:http://blog.csdn.net/xiaanming/ar ...
基于jQuery实现汉字转换成拼音代码
基于jQuery实现汉字转换成拼音代码.这是一款基于jQuery.Hz2Py.js插件实现的汉字转拼音特效.效果图如下: 在线预览源码下载实现的代码. html代码: <br /> ...
SQL 汉字转换成拼音首字母首字母查
-- ============================================= -- 功能:汉字转换成拼音首字母首字母查 -- ========================== ...
C# 将汉字转化成拼音
本文来自http://www.cnblogs.com/yazdao/archive/2011/06/04/2072488.html 首先下载Visual Studio International Pa ...
python把汉字转换成拼音实现程序
python把汉字转换成拼音实现程序文章一个简洁干的汉字转拼音程序,复制下载就可以直接使用,有需要的同学可以参考一下下. #coding:utf-8 #基于python2.6 table = 'a ...
C++ 将汉字转换成拼音全拼
#include <string> using std::string; //======================================================= ...
C++ 将汉字转换成拼音全拼【转载】
转载自https://www.cnblogs.com/mzhrd/p/4758105.html #include <string> using std::string; //======= ...
使用 js 实现一个中文自动转换成拼音的工具库
使用 js 实现一个中文自动转换成拼音的工具库中文 => zhong-wen 应用场景 SEO 友好, URL 自动转换 blogs 发布文章,自动化部署,自动生成 url 的 path (时 ...
Python汉字转换成拼音
最近在使用Python做项目时,需要将汉字转化成对应的拼音. 网上的一些包大多是python2.x的,使用下面这个包,支持python3.6 xpinyin 0.5.5 >>> fr ...

随机推荐

python中网络编程基础
一:什么是c\s架构 1.c\s即client\server 客户端\服务端架构. 客户端因特定的请求而联系服务器并发送必要的数据等待服务器的回应最后完成请求服务端:存在的意义就是等待客户端的请求, ...
[原][粒子特效][spark]发射器emitter
深入浅出spark粒子特效连接:https://www.cnblogs.com/lyggqm/p/9956344.html group添加emitter的方式: eimtter: 上图是spark源码 ...
Java之——利用Comparator接口对多个排序条件进行处理
转载自:http://blog.csdn.net/l1028386804/article/details/56513205 膜拜大神··· 一.需求假设现在有个如此的需求:需要对一个这样的雇员列表进 ...
分散的配置文件VS集中的注册表
假设有这样一个工程,是这样设计的: 1整个软件.服务被切分为由若干独立的多道程序(多个进程/微服务): 2 这些多道程序只是“机制mechanism”,而“策略strategy”写在各自用到的配置文 ...
HTML如何实现滚动文字
HTML如何实现滚动文字一.总结一句话总结:marquee标签,也可以用js和css来实现 marquee标签也可jss和css <marquee><span style=&q ...
雷林鹏分享：C# 类型转换
C# 类型转换类型转换从根本上说是类型铸造,或者说是把数据从一种类型转换为另一种类型.在 C# 中,类型铸造有两种形式: 隐式类型转换 - 这些转换是 C# 默认的以安全方式进行的转换.例如,从小的 ...
p1218 Superprime Rib
深搜,添加数字后如果仍为质数,继续递归. #include <iostream> #include <cstdio> #include <cmath> #inclu ...
（转）python 全栈开发，Day74(基于双下划线的跨表查询,聚合查询,分组查询,F查询,Q查询)
昨日内容回顾 # 一对多的添加方式1(推荐) # book=Book.objects.create(title="水浒传",price=100,pub_date="164 ...
Android的组件化和模块化
Android随着业务的增多,而且后续新的需求的增加,代码的修改会变得非常频繁然后最近在看组件化和模块化公司的业务没有那么大,所以这种方式我并没有采取但是还是需要了解下他的使用机制还有优缺点之 ...
NYOJ - 整数划分（四）
题目链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=746 要求对一个n的整数插入m个乘号,求最大结果. 构造dp:dp[i][j]表示枚举至j ...

js如何简单实现汉字转成拼音的功能

js如何简单实现汉字转成拼音的功能的更多相关文章

随机推荐

热门专题