Wyciągnięcie z funkcji lub addEventListener wraz z wywołaniem funkcji.

0

Mam funkcję, która nasłuchuje na 'keyup'. To jest funkcja keyCheck (jak widać na screenie):

title

W tej funkcji mam funkcję, która każde nowe słowo podnosi do dużej litery.

Problem polega na tym, że jeśli jest tak jak teraz, czyli funkcja w funkcji, to nie podmienia mi inputa (nie podnosi znaków automatycznie do dużej litery).

Jeśli funkcja actionCapitalize nie jest w żadnej funkcji i ma normalne nasłuchiwanie na 'keyup' na jakiś input, to działa bezproblemowo.

Chciałbym to zrobić właśnie tak jak jest teraz, bo pisać kilka razy to samo zmieniając w środku tylko jedno słowo, to jest bez sensu.

        function actionCapitalize(inputType) {
            let splitStr = inputType.toLowerCase().split(' ');
            for (let i = 0; i < splitStr.length; i++) {
                splitStr[i] = splitStr[i].charAt(0).toUpperCase() + splitStr[i].substring(1);     
            }
            inputType = splitStr.join(' ');
        }
        actionCapitalize(inputFirstName.value)

No chyba że da się w jakiś sposób już w addEventListener podać argument. To zawsze można wyrzucić actionCapitalize z keyCheck i dać np.

inputFirstName.addEventListener('keyup', actionCapitalize(inputFirstName.value));

Oczywiście to nie zadziała, ale dzięki temu wiecie co mam na myśli ;)

1

Spróbuj czytelniej opisać swój problem.

Odnośnie kodu, najlepiej zapodaj działający demonstrator problemu, który można sobie odpalić i sprawdzić, co się tam dzieje.

2

Dla handlerów eventów można podawać argumenty, jest nimi obiekt zdarzenia, w przypadku keyup jest to KeyboardEvent. Każdy event w JS posiada właściwość target, która wskazuje na element na stronie, na rzecz którego zdarzenie zostało wywołane.

    <script>
        function actionCapitalize(inputType) {
            let splitStr = inputType.toLowerCase().split(' ');
            for (let i = 0; i < splitStr.length; i++) {
                splitStr[i] = splitStr[i].charAt(0).toUpperCase() + splitStr[i].substring(1);
            }

            return splitStr.join(' ');
        }

        function capitalizeInput(event) {
            event.target.value = actionCapitalize(event.target.value);
        }

        document.addEventListener("DOMContentLoaded", function () {
            const inputFirstName = document.getElementById('first-name');
            inputFirstName.addEventListener("keyup", (event) => capitalizeInput(event));
        });
    </script>
<body>
    <input id='first-name' type="text" />
</body>
1
WuJeKuBa napisał(a):

Problem polega na tym, że jeśli jest tak jak teraz, czyli funkcja w funkcji, to nie podmienia mi inputa (nie podnosi znaków automatycznie do dużej litery).

Jeśli funkcja actionCapitalize nie jest w żadnej funkcji i ma normalne nasłuchiwanie na 'keyup' na jakiś input, to działa bezproblemowo.

Jak na moje oko to jest na odwrót. Problemem nie jest że nie podmienia inputa ale to że w drugim przypadku ci podmienia ^^.
Nie podnosi znaków automatycznie ponieważ js przekazuje parametry funkcji przez wartość; innymi słowy *input jest kopią * inputFistName.value
Funkcja *actionCapitalize * zrobi co tam chcesz ale ale ostatecznie i tak wszystkie operacje są na tej kopii lokalnej.

0

Kod: https://jsfiddle.net/WuJeKuBa/ou7yae9L/57/#

    actionCapitalize(inputFirstName.value)
    actionCapitalize(inputLastName.value)

Chodzi oto, że po kliknięciu w button w konsoli wyświetla wartości prawidłowo, ale nie podmienia wartości w input.

Zależy mi na tym, aby funkcja actionCapitalize była w funkcji correctForm.

Mógłbym zapisać to:

     			let splitStr = inputValue.toLowerCase().split(' ');
     			for (let i = 0; i < splitStr.length; i++) {
           splitStr[i] = splitStr[i].charAt(0).toUpperCase() + splitStr[i].substring(1);     
            }
            inputValue = splitStr.join(' ')
     }

np. 5 razy podstawiając pod inputValue po prostu inputy, które chcę, aby po kliknięciu w button zmieniły w sobie, aby każde słowo zaczynało się z dużej litery. Ale wolałbym, aby było mniej kodu.

1

Masz:

<head>
<meta charset="UTF-8">
<title></title>

<style>
div {
  margin-bottom: 10px;
}
</style>
</head>
<body>

<form>
  <div>
    <label>Imię:</label>
    <input class="input-first-name">
  </div>
  <div>
    <label>Nazwisko:</label>
    <input class="input-last-name">
  </div>
  <button type="button">Zarejestruj się!</button>
</form>

<script>
const registerForm = document.querySelector('form');
const inputFirstName = registerForm.querySelector('.input-first-name');
const inputLastName  = registerForm.querySelector('.input-last-name');

function correctForm() {
  var obj = this;
  var txt = obj.value;
	   
  let splitStr = txt.toLowerCase().split(' ');
  for (let i = 0; i < splitStr.length; i++) {
    splitStr[i] = splitStr[i].charAt(0).toUpperCase() + splitStr[i].substring(1);     
  }
  txt = splitStr.join(' ')
  obj.value = txt;
}

document.addEventListener("DOMContentLoaded", function () {
  inputFirstName.addEventListener("keyup", correctForm);
  inputLastName.addEventListener("keyup", correctForm);
});
</script>
</body>
</html>

Można też użyć

function correctForm(e) {
  var obj = e.target;

gdybyś miał kiedyś problemy z this-ami.

BTW: twój kod nie obsługuje nazwisk łączonych typu Duda-Smalona.

0

Udało mi się to zapisać prościej :D

    let splitStr;
        function actionCapitalize(inputValue) {
            splitStr = inputValue.toLowerCase().split(' ');
            for (let i = 0; i < splitStr.length; i++) {
            splitStr[i] = splitStr[i].charAt(0).toUpperCase() + splitStr[i].substring(1);     
        }
    }
    actionCapitalize(inputFirstName.value)
    inputFirstName.value = splitStr.join(' ')

Ale dzięki za chęć pomocy! ;)

1 użytkowników online, w tym zalogowanych: 0, gości: 1