在每个输入 HTML/JS 后添加一个逗号答案

【问题标题】：Adding a comma after every input HTML/JS在每个输入 HTML/JS 后添加一个逗号
【发布时间】：2020-06-17 00:37:24
【问题描述】：

我已经看到很多与这个问题相关的列表，但它们似乎都不起作用或不完全符合我的要求。

我有一个带有输入 type="text" 的 HTML 文档。我正在尝试接受用户的数字，每次输入后，都会出现一个逗号。

例如

User Enters 1234 -> Display 1,2,3,4

我希望将值保存到背面的数组中，所以同样的例子

array[0] = 1
array[1] = 2
array[2] = 3
array[3] = 4

我的 HTML 文件看起来像这样

<div class="input-group mb-3">
    <input type="text" ng-keyup="format(this)">
</div>

顶级 DIV CLASS 使用 ng-controller

<div class="modal-body" ng-controller="SplitCtrl">

我只是好奇如何调用该控制器来创建一个函数来分离我的输入。

【问题讨论】：

C#中的字符串也可以作为一个字符数组，你可以获取长度并遍历它。否则，您可以使用Substring 将字符串分成一个字符的较小字符串。
您使用的是 AngularJS 还是 Angular（您的代码是 Javascript 还是 Typescript）？这在 C# 中很容易做到，但在 AngularJS 或 Angular 应用程序中并不重要（除非您要在调用服务器时这样做）。您需要选择一种语言
这是 AngularJS。抱歉，如果不清楚。所以我的代码是 Javascript

标签： javascript c# html angularjs

【解决方案1】：

我会这样做：

<div ng-controller="SplitCtrl">
  <div class="input-group mb-3">
    <input type="text" ng-model="text" ng-keyup="format($event)">
  </div>
</div>

var app = angular.module('myApp', []);

app.controller('SplitCtrl',['$scope' ,function ($scope) {
  $scope.format = function(e) {
    if ($scope.text.length > 1) {
      var text = $scope.text.split('').filter(function(_, i) {
        return (i % 2) === 0;//filter out previous commas
      }).join('') + e.key;
      $scope.text = text.split('').join(',');
    }
  }
}])

【讨论】：

【解决方案2】：

只要您不需要包含多个字符的数字（例如 10 个），这应该可以。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="//code.angularjs.org/1.8.0/angular.min.js"></script>  
</head>
<body ng-app="myApp">
<script>
  angular.module('myApp', [])
    .controller('AppController', ['$scope', function($scope) {
      $scope.change = function() {
        $scope.numbers = $scope.numbers.replace(/,/g, '').split('').join(',');
      };
    }]);
</script>
<div ng-controller="AppController">
  <input type="text" ng-model="numbers" ng-change="change()" />
</div>
</body>
</html>

【讨论】：