AngularJS: преобразовывать вводимый текст в случайный текст при наборе текста - PullRequest
Новая
       14

AngularJS: преобразовывать вводимый текст в случайный текст при наборе текста

0 голосов
/ 21 марта 2019

Я пытаюсь сделать то, что мне кажется довольно простым делом, но у меня возникают проблемы с его настройкой.

У меня есть форма с некоторыми полями ввода, которые необходимо преобразовать в регистр заголовков.(первая буква каждого слова должна быть в верхнем регистре) при наборе.

Я нашел функцию для этого, но она не работает в поле ввода.

Я такжеЯ нашел несколько необычных сценариев, таких как http://individed.com/code/to-title-case/, но их так много, что мне не нужно.

Я использую AngulasJS, если это действительно имеет значение. 

function toTitleCase(str) {
        return str.replace(
            /\w\S*/g,
            function(txt) {
              return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
            }
        );
    }
<div class="form">
    <h4>Part of a form</h4>
  <form class="form" name="form" method="post">
   <label for="username"><span class="required">*</span>Username:</label>
   <input id="username" type="text" name="username" autofocus onchange="form.output.value=toTitleCase(this.value)" onkeyup="form.output.value=toTitleCase(this.value)">
   <input class="login" type="submit" value="Save">
   </form>
</div>

Ответы [ 2 ]

1 голос
/ 21 марта 2019

Прежде всего, с angularjs, вы должны использовать ng-change вместо onchange, как и для других событий. Вы можете просто справиться со следующим способом

DEMO 

var app = angular.module('app', []);
app.controller('HelloWorldCtrl', function($scope,$http){
});
<!DOCTYPE html>
<html ng-app="app">
  <head>
    <script data-require="angular.js@*" data-semver="4.0.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body ng-controller="HelloWorldCtrl">
     <input ng-model="some" ng-change="some = (some | uppercase)"  />
  </body>
</html>
0 голосов
/ 21 марта 2019

Поле ввода имеет id, равное username, а не output, поэтому 

onchange="form.output.value=

не удается.Изменить ссылки на output на ссылки на username: 

function toTitleCase(str) {
  return str.replace(
    /\w\S*/g,
    function(txt) {
      return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    }
  );
}
<div class="form">
  <h4>Part of a form</h4>
  <form class="form" name="form" method="post">
    <label for="username"><span class="required">*</span>Username:</label>
    <input id="username" type="text" name="username" autofocus onchange="form.username.value=toTitleCase(this.value)" onkeyup="form.username.value=toTitleCase(this.value)">
    <input class="login" type="submit" value="Save">
  </form>
</div>

Еще лучше использовать подходящий обработчик событий: 

const input = document.querySelector('#username');
const handler = () => {
  input.value = toTitleCase(input.value);
};
input.onchange = handler;
input.onkeyup = handler;

function toTitleCase(str) {
  return str.replace(
    /\w\S*/g,
    function(txt) {
      return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    }
  );
}
<div class="form">
  <h4>Part of a form</h4>
  <form class="form" name="form" method="post">
    <label for="username"><span class="required">*</span>Username:</label>
    <input id="username" type="text" name="username" autofocus>
    <input class="login" type="submit" value="Save">
  </form>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...