html5 - Check with jQuery if a value in an input element was entered -

First of all, I checked every topic similar to my problem, unfortunately, I have not found my answer yet. I tried to combine some towers, but I could not find any success (note: just started learning jQuery)

So here is my problem:

I have four lessons A form is created with input and one button Each input has a svg icon and a placeholder text.

HTML:

  & lt; Div class = "first field" & gt; & Lt; Input class = "text" type = "text" placeholder = "U name". Value = "" & gt; & Lt; Svg class = "unfilled" id = "svg_user" & gt; & Lt; / Svg & gt; & Lt; / Div & gt;  

(Since it is irrelevant I removed svg data.)

The svg icon has the same color as the placeholder. The color of the text entered is a bit lighter. I want to change the color of the icon as the text entered in the same color, but only when something is recorded.

At first I tried to insist on some warning, to check whether it knows when something was recorded I used an example from the jQuery website:

< Pre> $ (".text") .change (function () {warnings (". Handler for .change ()" is called ".");}); < P> It was not working, and according to the documentation, it should be.

I found this solution on the stack, but that too will not work:

  $ (Document) .ready ( Function () {$ ('. Text') Keyup (function () {alert ('test');});});  

Without warning, Quick Reference:

The SVG icon needs to be changed to the same color as the entered text, but only when something is done is removed in the color of the placeholder text when deleted

For now, I thank you for all your help.

A document.ready The code needs to be wrapped in the code, because this code wants to run instantly , the moment it is loaded normally, the code is run before the dom (i.e. the page is fully presented. ) - so there is no need to access some elements - and the code breaks.

Here's an example of using Docs. Cover:

HTML:

  & lt; Div class = "first-field" & gt; & Lt; Input class = "text" type = "text" placeholder = "U name" ... value = "" /> & Lt; Svg class = "unfilled" id = "svg_user" & gt; & Lt; / Svg & gt; & Lt; / Div & gt;  

JavaScript / jQuery:

  var ran = 0; $ (Document) .ready (function () {$ ('. Text') Keyup (function (e) {if (ran == 0) {ran ++; alert ('test');}});} ); // END document.  

---

However, if HTML is injected via Javascript or AJAX (via .load ()) / code> ) Or something like that, then any code will not trigger to run user events.

In that case, there is a simple solution: jQuery's .on () method.

  var ran = 0; $ (Document) .ready (function () {$ (document) .on ('keyup', '.text', function (e) {if (ran == 0) {ran ++; alert ('test') ;}});}); // END document.ready  

The above minor changes:

  $ (document) .on ('keyup', '.text', function ) Binds the event handler to the document, and it looks at any  funnel  events with        . 
 
 
 
 One of them should work fine. 
 
 
 Note that the examples created for you Includes a check, so that  keep  operation is not done more than once. You can remove it And code can do something in each of the keypresses: 
 
  $ (document) .ready (function () {$ ('.text') keyboard (task (e) {warning ( 'Test');});}); // ed document.