最近项目需要一个功能，实现汉字转拼音功能，具体比如说输入一个“你好”，同时带出对应拼音“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如何简单实现汉字转成拼音的功能的更多相关文章

  1. Android 实现ListView的A-Z字母排序和过滤搜索功能，实现汉字转成拼音

    转载:http://blog.csdn.net/xiaanming/article/details/12684155 转载请注明出处:http://blog.csdn.net/xiaanming/ar ...

  2. 基于jQuery实现汉字转换成拼音代码

    基于jQuery实现汉字转换成拼音代码.这是一款基于jQuery.Hz2Py.js插件实现的汉字转拼音特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <br /> ...

  3. SQL 汉字转换成拼音首字母 首字母查

    -- ============================================= -- 功能:汉字转换成拼音首字母 首字母查 -- ========================== ...

  4. C# 将汉字转化成拼音

    本文来自http://www.cnblogs.com/yazdao/archive/2011/06/04/2072488.html 首先下载Visual Studio International Pa ...

  5. python把汉字转换成拼音实现程序

    python把汉字转换成拼音实现程序 文章一个简洁干的汉字转拼音 程序,复制下载就可以直接使用,有需要的同学可以参考一下下. #coding:utf-8 #基于python2.6 table = 'a ...

  6. C++ 将汉字转换成拼音全拼

    #include <string> using std::string; //======================================================= ...

  7. C++ 将汉字转换成拼音全拼【转载】

    转载自https://www.cnblogs.com/mzhrd/p/4758105.html #include <string> using std::string; //======= ...

  8. 使用 js 实现一个中文自动转换成拼音的工具库

    使用 js 实现一个中文自动转换成拼音的工具库 中文 => zhong-wen 应用场景 SEO 友好, URL 自动转换 blogs 发布文章,自动化部署,自动生成 url 的 path (时 ...

  9. Python汉字转换成拼音

    最近在使用Python做项目时,需要将汉字转化成对应的拼音. 网上的一些包大多是python2.x的,使用下面这个包,支持python3.6 xpinyin 0.5.5 >>> fr ...

随机推荐

  1. python 下载大文件

    当使用requests的get下载大文件/数据时,建议使用使用stream模式. 当把get函数的stream参数设置成False时,它会立即开始下载文件并放到内存中,如果文件过大,有可能导致内存不足 ...

  2. C# 使用 protobuf 进行对象序列化与反序列化

    protobuf 是 google的一个开源项目,可用于以下两种用途: (1)数据的存储(序列化和反序列化),类似于xml.json等: (2)制作网络通信协议. 源代码下载地址:https://gi ...

  3. XML简单入门

    1.xml文件的第一句为<?xml version="1.0" ?> xml 1.0版本和1.1版本有较大不同,且1.1版本向下不可兼容,故使用version 1.0 ...

  4. np.split()和np.array_split()

    来自:爱抠脚的coder np.split(): 该函数的参数要么按照数字划分(int),要么是按列表list划分:如果仅是输入一个int类型的数字,你的数组必须是均等的分割,否则会报错. np.ar ...

  5. Oracle(限定查询2)

    3.2 对数据进行限定查询 在标准SQL之中定义了许多的运算符. 3.2.1.关系运算符 范例: 范例: 范例: 在使用关系运算符判断字符数据的时候注意大小写的编写问题.因为Oracle是区分大小写的 ...

  6. STL_map.插入

    环境:Win7x64.vs08x86 1.类中这样声明:map<string, list<string>> FmapTagAttr; 2.插入数据时这样: list<st ...

  7. 力扣（LeetCode）832. 翻转图像

    给定一个二进制矩阵 A,我们想先水平翻转图像,然后反转图像并返回结果. 水平翻转图片就是将图片的每一行都进行翻转,即逆序.例如,水平翻转 [1, 1, 0] 的结果是 [0, 1, 1]. 反转图片的 ...

  8. 第 3 章 镜像 - 019 - 使用公共 Registry

    保存和分发镜像的最直接方法就是使用 Docker Hub.https://hub.docker.com/ Docker Hub 是 Docker 公司维护的公共 Registry.用户可以将自己的镜像 ...

  9. Spring学习笔记(入门)

    1.基本看了一下,spring就是利用这个框架帮助我们实例化对象的工具.首先我们需要引入jar包,pom.xml如下: <project xmlns="http://maven.apa ...

  10. seo中的竞价排名是什么

    seo中的竞价排名是什么 一.总结 一句话总结:竞价排名的基本特点是按点击付费,推广信息出现在搜索结果中(一般是靠前的位置),如果没有被用户点击,则不收取推广费. 搜索引擎的一种推广广告的方式 1.竞 ...