Vraag Hoe de nieuwe waarde van een HTML-invoer te krijgen nadat een toetsaanslag deze heeft gewijzigd?


Ik heb een HTML-invoervak

<input type="text" id="foo" value="bar">

Ik heb een handler bijgevoegd voor de 'keyup'event, maar als ik tijdens de gebeurtenishandler de huidige waarde van het invoervak ​​ophaal, krijg ik de waarde zoals die was, en niet zoals die zal zijn!

Ik heb het oppikken geprobeerd 'toets indrukken'en'verandering'gebeurtenissen, hetzelfde probleem.

Ik ben er zeker van dat dit eenvoudig op te lossen is, maar op dit moment denk ik dat de enige oplossing is dat ik in de toekomst een korte time-out kan gebruiken om een ​​paar codes een paar milliseconden in gang te zetten!

Is er hoe dan ook de actuele waarde te verkrijgen tijdens die evenementen?

EDIT: lijkt erop dat ik een cacheprobleem had met mijn js-bestand, omdat ik later dezelfde code controleerde en het werkte prima. Ik zou de vraag verwijderen, maar niet zeker of die verliest rep voor de aardige mensen die ideeën gepost :)


15
2017-10-21 17:36


oorsprong


antwoorden:


Kun je je code plaatsen? Ik vind hier geen probleem mee. Getest op Firefox 3.01 / safari 3.1.2 met:

function showMe(e) {
// i am spammy!
  alert(e.value);
}
....
<input type="text" id="foo" value="bar" onkeyup="showMe(this)" />

19
2017-10-21 17:45



Er zijn twee soorten invoerwaarden: velden eigendom en de html van het veld attribuut.

Als u de key-upgebeurtenis en de veldwaarde gebruikt, krijgt u de huidige waarde van het veld. Het is niet het geval wanneer u field.getAttribute ('value') gebruikt, wat zou teruggeven wat in het html-attribuut staat (value = ""). De eigenschap vertegenwoordigt wat er in het veld is getypt en verandert terwijl u typt, terwijl het kenmerk niet automatisch wordt gewijzigd (u kunt dit wijzigen met de methode field.setAttribute).


6
2017-10-21 18:00



Om een ​​te geven modern aanpak van deze vraag. Dit werkt goed, ook Ctrl+v. GlobalEventHandlers.oninput.

var onChange = function(evt) {
  console.info(this.value);
  // or
  console.info(evt.target.value);
};
var input = document.getElementById('some-id');
input.addEventListener('input', onChange, false);

4
2017-11-26 18:51



<html>
    <head>
        <script>
        function callme(field) {
            alert("field:" + field.value);
        }
        </script>
    </head>
    <body>
        <form name="f1">
            <input type="text" onkeyup="callme(this);" name="text1">
        </form>
    </body>
</html>

Het lijkt erop dat je de onkeyup kunt gebruiken om de nieuwe waarde van het HTML-invoerbesturingselement. Hoop dat het helpt.


3
2017-10-21 17:47



U kunt deze code proberen (vereist jQuery):

<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#foo').keyup(function(e) {
                var v = $('#foo').val();
                $('#debug').val(v);
            })
        });
    </script>
</head>
<body>
    <form>
        <input type="text" id="foo" value="bar"><br>
        <textarea id="debug"></textarea>
    </form>
</body>
</html>

1
2017-10-21 17:51



Hier is een tabel met de verschillende gebeurtenissen en de niveaus van browserondersteuning. U moet een evenement kiezen dat wordt ondersteund in ten minste alle moderne browsers.

Zoals u zult zien aan de tabel, de keypress en change evenement hebben geen uniforme ondersteuning, terwijl de keyup evenement doet.

Zorg er ook voor dat je de gebeurtenishandler verbindt met behulp van een browser-compatibele methode ...


0
2017-10-21 17:45