使用 Angular.js 构建转写系统或虚拟键盘
4.60/5 (3投票s)
本教程将向您展示如何使用 Angular.js、HTML 和 CSS 构建转写系统（在我的例子中是阿拉伯语）或虚拟键盘。
引言
在本教程中，我们将构建一个虚拟键盘。在我的例子中，我正在为我目前正在进行的一个项目构建一个阿拉伯语键盘，但您可以轻松地将其改编为构建任何语言的虚拟键盘或转写系统。我们将使用的框架是 Angular.js，让我们开始吧。
什么是转写？
转写简单来说就是将一种语言的字母表转换成另一种语音等效的字母表。在本例中，我们将使用拉丁字母/英语字母书写阿拉伯语。虚拟键盘将负责将我们的输入转写成阿拉伯字母。
例如，“salam”（你好）将被转写为 ????。
要查看演示示例，请查看此链接 [在线阿拉伯语虚拟键盘]。
那么我们如何使用 Angular.js 创建这个虚拟键盘呢？当我第一次想创建这个工具时，我认为在 Angular.js 中创建它会很困难，但事实证明，使用 Google 这个优秀的框架构建它甚至更简单。
如何使用虚拟键盘？
虚拟键盘可以通过两种方式使用
一种是通过鼠标 - 在这种情况下，没有转写，只是简单的文本连接。
另一种是通过物理键盘 - 在这种情况下，我们用英语输入，因此我们的系统需要进行转写，将英语字母转换成阿拉伯语，并将其放在文本区域中供用户复制。
入门
要开始，我们需要使用必要的工具配置我们的本地开发机器，因此首先安装 Node.js 平台（如果尚未安装）。这是一个关于如何使用 NVM 在 Ubuntu 下安装 Node.js 的教程。或者直接从官方 Node.js 网站下载安装程序并自行安装。
接下来，我们需要安装 http-server，这是一个用于提供静态文件的本地 http 服务器，这样我们就可以在本地测试我们的 Angular.js 应用程序。
因此，如果您在 Linux/MAC 下，请打开您的终端；如果您在 Windows 下，请打开您的命令提示符，然后输入
npm install http-server -g
接下来，安装 http-server 后，创建您的开发文件夹，让我们将其命名为 virtual-keyboard，然后创建一些文件和文件夹。
mkdir virtual-keyboard && cd virtual-keyboard
touch index.html
mkdir scripts styles images
构建和设置键盘布局
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Virtual Keyboard</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="styles/bootstrap.min.css">
<link rel="stylesheet" href="styles/style.css">
</head>
<body >
<div class="section">
<div style="width:100%;margin: auto">
<div>
<div class="txtWrapper">
<textarea dir="rtl" placeholder="..."
ng-model="text" ng-change="trans()"
auto-focus="autoFocus">
</textarea>
</div>
<div>
<div class="keysWrapper">
<div style="width:100%;margin:auto">
<div class="keyWrapper">
<div class="clearfix">
<a ng-repeat="obj in shema" ng-click="putc(obj.arabic)">
<div class="arabicKey"><span>{[{ obj.arabic }]}</span></div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="scripts/angular.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>
然后在 *styles* 文件夹下，下载并放置 bootstrap，然后创建一个 *style.css* 文件，打开它并复制以下样式
.txtWrapper {
background: #A52121;
border: 1px solid #213143;
padding: 0px;
margin: 0px;
}
.txtWrapper textarea {
background: #fff;
border: 1px solid #000;
box-sizing: border-box;
height: 200px;
padding: 20px;
text-align: right;
width: 100%;
}
.keyboardArea {
text-align: right;
direction: ltr;
}
.keyWrapper{
position: relative;
padding: 5px;
margin: 0 0 10px;
background: #000;
width:100%;
color:white;
border-style:groove;
z-index: 999;
}
.keyWrapper a{
background: rgba(255, 255, 255, 0.04);
border: 1px solid #000;
color: #fff;
cursor: pointer;
display: inline-block;
float: right;
font-size: 25px;
height: 40px;
margin: 0 1px 2px;
position: relative;
text-align: center;
text-decoration: none;
width: 50px;
transition: 0.25s;
}
.arabicKey {
position: absolute;
right: 5px;
top: 0;
color:white;
}
.keyWrapper a:hover .arabicKey{
color: blue;
font-size: 26px;
}
构建 Angular.js 应用程序
在 *scripts* 文件夹下，创建一个 *app.js* 文件，然后按照以下步骤添加代码。
首先，我们将从创建我们的应用程序开始
var app = angular.module('myKeyboard',[]);
接下来，我们声明一个常量，该常量包含我们的键盘模式，即阿拉伯字母和英语字母之间的映射。
app.constant('SHEMA',[
{ "arabic": "\u0627", "latin": ["a"]},
{ "arabic": "\u0628", "latin": ["b", "B"]},
{ "arabic": "\u062A", "latin": ["t"]},
{ "arabic": "\u062B", "latin": ["c"]},
{ "arabic": "\u062C", "latin": ["j"]},
{ "arabic": "\u062D", "latin": ["h"]},
{ "arabic": "\u062E", "latin": ["h'","kh="]},
{ "arabic": "\u062F", "latin": ["d"]},
{ "arabic": "\u0630", "latin": ["z"]},
{ "arabic": "\u0631", "latin": ["r", "R"]},
{ "arabic": "\u0632", "latin": ["Z"]},
{ "arabic": "\u0633", "latin": ["s"]},
{ "arabic": "\u0634", "latin": ["C"]},
{ "arabic": "\u0635", "latin": ["S"]},
{ "arabic": "\u0636", "latin": ["D"]},
/* .... */
/* values omitted */
]);
接下来，我们创建自动聚焦指令
app.directive('autoFocus',[ function() {
return {
restrict: 'A',
scope: {
value: "=autoFocus"
},
link: function($scope, $element, attrs) {
$scope.$watch("value", function(currentValue, previousValue) {
$element[0].focus();
})
}
}
}])
然后，我们使用它
<textarea auto-focus="autoFocus"></textarea>
这个指令对我们的键盘非常重要，但只有在通过鼠标使用键盘时才重要，因为当我们点击虚拟键盘键时，文本区域会失去焦点，因此我们需要让它重新获得焦点，所以不用手动这样做，每次按下按键时，我们都会在代码的帮助下通过此指令设置它。
最后，我们编写控制器
app.controller('KeyboardController',["$scope","SHEMA",function($scope,SHEMA) {
$scope.text = "";
$scope.shema = SHEMA;
$scope.putc = function(letter){
$scope.text += letter;
$scope.autoFocus = true;
}
$scope.trans = function(){
var txt = $scope.text;
angular.forEach($scope.shema, function(obj, k){
angular.forEach(obj.latin, function(c, kk){
var re = new RegExp(c);
txt = txt.replace(re,obj.arabic);
});
});
$scope.text = txt;
return ;
}
}]);
在控制器中，我们注入 `$scope` 和 `SHEMA` 常量。
`$scope.text` 模型通过 `ng-model` 绑定到 `textarea`，因此 `$scope.text` 中存在的内容也存在于 `textarea` 中。
当我们通过鼠标使用键盘时， `$scope.puts` 被激活，它通过 `ng-click` 绑定到每个虚拟键盘键，当我们点击键盘键时， `ng-click` 会被触发。在这种情况下，我们不需要转写，我们只需要将按下的阿拉伯字母与 `textarea $scope.text`（最初初始化为空字符串）连接起来。
<textarea dir="rtl" ng-model="text" auto-focus="autoFocus"></textarea>
当我们使用实际键盘输入时， `$scope.trans()` 方法会在 `textarea` 每次更改时（更改事件被触发）调用。
<textarea dir="rtl" ng-model="text" ng-change="trans()" auto-focus="autoFocus"></textarea>
`$scope.trans()` 负责实时转写我们输入的（英语）内容，并将 `$scope.text` 更改为包含我们输入内容的阿拉伯文本等效项。
`trans()` 方法的关键部分是
var re = new RegExp(c);
txt = txt.replace(re,obj.arabic);
它简单地使用 JavaScript 正则表达式函数将我们文本中的拉丁字母替换为阿拉伯语等效项。
测试虚拟键盘
首先克隆 GitHub 仓库
git clone https://github.com/techiediaries/virtual-arabic-keyboard.git
cd virtual-arabic-keyboard
http-server
在您的终端/命令提示符中，使用您的网络浏览器导航到 http://127.0.0.1:8080
您应该会看到：
结论
这就是本教程的结尾。您可以在此页面找到此阿拉伯语虚拟键盘的完整代码
GitHub 仓库。您也可以在此在线阿拉伯语键盘网站上查看实时演示。
这篇文章使用 Angular.js 构建阿拉伯语转写系统或虚拟键盘 最初发表于 techiediaries。