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 ...

随机推荐

HP惠普笔记本安装VirtualBox后不能选择64bit的系统
之前在台式机上安装VirtualBox,一切OK,能够安装64位的任何版本iso包今天在hp笔记本上安装,安装VirtualBox完毕后,只能选择32位的iso版本. 而我目前只有一个linux64b ...
Oracle存储过程的异常处理
1.为了提高存储过程的健壮性,避免运行错误,当建立存储过程时应包含异常处理部分. 2.异常(EXCEPTION)是一种PL/SQL标识符,包括预定义异常.非预定义异常和自定义异常: 3.预定义异常是指 ...
flutter安装与配置 v1.2.1版本
1---- 上面是下载地址https://flutter.dev/docs/development/tools/sdk/archive#windows 2---- 下载后,解压安装到C盘 3--- 测 ...
variable_scope
1. with tf.variable_scope("a"): b=tf.get_variable(name="g",initializer=12) print ...
第 3 章镜像 - 017 - RUN vs CMD vs ENTRYPOINT
RUN.CMD 和 ENTRYPOINT 这三个 Dockerfile 指令看上去很类似,很容易混淆. 简单的说: RUN 执行命令并创建新的镜像层,RUN 经常用于安装软件包. CMD 设置容器启动 ...
绕过cookies进行登录并封装请求方法
之前写了一篇使用session跨请求保持会话的帖子,这次在它的基础上对请求方法简单封装一下,可以达到复用的效果 1.先定义登录方法在登录方法中利用session跨请求保持会话,并返回session, ...
legend2---开发日志7（vue的使用场景有哪些，或者说使用的优缺点）
legend2---开发日志7(vue的使用场景有哪些,或者说使用的优缺点) 一.总结一句话总结:任何页面都可以使用vue,尤其是有交互的或者用ajax的,但是vue插件及其它各种插件加载需要时间, ...
关于 Oracle DB CONSTRAINT约束的一些SQL ORA-02292: integrity constraint violated
ALTER TABLE table_name DISABLE CONSTRAINT constraint_name; select * from all_constraints where owner ...
English trip V1 - B 21. On a busy day 忙碌的一天 Teacher:Taylor Key: at on in
In this lesson you will learn to tell the time. 说时间课上内容(Lesson) at time; at 7:30; at midday; ...
android--------自定义控件之方法篇
前面简单的讲述了Android中自定义控件的理论和流程图,今天通过代码来详细的讲解一下其中的方法首先先创建一个类 CircularView 继承于 View,之后实现构造方法(初始化步骤) publ ...

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

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

随机推荐

热门专题