最近项目需要一个功能，实现汉字转拼音功能，具体比如说输入一个“你好”，同时带出对应拼音“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. spring boot 当参数传入开头多个0时，报错：JSON parse error: Invalid numeric value: Leading zeroes not allowed

    原因是: Jackson解析json配置的问题 在配置文件中设置下: spring.jackson.parser.allow-numeric-leading-zeros=true

  2. python中常用的模块二

    一.序列化 指:在我们存储数据的时候,需要对我们的对象进行处理,把对象处理成方便存储和传输的数据格式,这个就是序列化, 不同的序列化结果不同,但目的是一样的,都是为了存储和传输. 一,pickle.可 ...

  3. VS IIS Express 支持局域网访问

    使用Visual Studio开发Web网页的时候有这样的情况:想要在调试模式下让局域网的其他设备进行访问,以便进行测试.虽然可以部署到服务器中,但是却无法进行调试,就算是注入进程进行调试也是无法达到 ...

  4. 大话WebRTC的前世今生

    音视频的历史 音视频可以说是人类与生俱来的需求,人一出生就要用耳朵听,用眼睛看.中国的古代神话中为此还专门设置了两位神仙(千里眼和顺风耳),他们可以听到或看到千里之外的声音或景像. 为了解决听的远和看 ...

  5. vue总是报缩进、空格的错

    在bulid/webpack.base.conf.js里 createLintingRule的内容注释掉

  6. vuex学习与实践——mapState、getter、mapGetters

    1.mapState辅助函数 当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余.为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性,让你少按几次键 ...

  7. x1c 2018 体验

    总结一下: 2018对比2017优点: 1屏幕完爆:HDR WHD镜面屏完爆 FHD 雾面屏(污+雾,所谓的油腻感),还有色彩!正红色第一次觉得这么好看.别人看得出来看不出来我不知道,至少我能看出来非 ...

  8. HRBUST - 2358 Magic network

    HRBUST - 2358 思路:dfs序 + 树状数组 代码: #pragma GCC optimize(2) #pragma GCC optimize(3) #pragma GCC optimiz ...

  9. 多线程工具之CompletionService

    这里涉及到Java的多线程并发知识,以及线程池相关的知识.就不在此说明了.具体说说CompletionService的应用场景和使用方法. 比如我们有10个线程需要丢到线程池里面去执行,然后把10个线 ...

  10. PHP里面增加写日志功能

    配置项中: