-1

My question is: at what point does text entered into an HTML text input field become the value of that input field?

I should note that the problem I am trying to solve is incidental (though I have included it below for the sake of context).

In the process of trying to solve this problem I realised that I needed a wider understanding of exactly what was going on, hence my more general question. I am unable to find any documentation explaining at what point text entered into a text field (or any HTML object that accepts text input) becomes part of that object (as a value, etc).

Incidental problem I am trying to solve:

I have a bunch of input[type='text'] fields on a page. Some of the fields are pre-populated with values and some have empty values (value='').

I have a script that prevents users from deleting or adjusting the text in the pre-populated fields but allows them to enter text in the empty fields.

However, once a user "leaves" a field, i.e. clicks outside of the field, the entered text is no longer editable, even though the value of the field does not appear to have been updated (at least as far as I can see in Chrome Developer Tools). To me, this suggests that the entered text has become the value of that field? But if that is the case, why doesn't Chrome Dev Tools reflect this?

HTML:

<form id="group-email-form">

    <input type="text" value="test1@test.com">

    <input type="text" placeholder="Email Address 2" value="">

</form>

jQuery:

$('#group-email-form input').on('focus', function() {

    var myValue = $(this).val();

    console.log(myValue);

    if ( myValue == '' ) {

        console.log('input has empty value');

    }

    else {

        console.log('input has a value');

        $(this).keydown( function (e) {

            var keyCode = e.keyCode || e.which;

            if ( keyCode == 9 ) {

            }

            else {

                return false;

            }

        });

    }

});
Luke
  • 4,825
  • 2
  • 30
  • 37
  • 2
    literally as soon as they type in the field. I'm not sure I understand why you're taking this approach. Are you aware of the `readonly` attribute? – zzzzBov May 09 '17 at 23:56
  • 1
    on `keypress` or `keyup`. Anything before that is still a keyboard signal. Once the signal reaches the DOM, it becomes part of the textbox value. – Don Bhrayan Singh May 09 '17 at 23:58
  • @zzzzBov - Am I aware of the readonly attribute? No, I'm not. But it sounds useful... Maybe you could provide that information as an answer to the question... Did you down-vote my question because I was unaware of a possible solution? Doesn't seem very Stack Overflow to me... – Luke May 10 '17 at 00:09
  • 1
    @Luke, the tone is not particularly appreciated, please review [ask] and [this meta post about how much research is expected of users](https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users). – zzzzBov May 10 '17 at 00:12
  • @zzzzBov I don't appreciate your tone either. I don't understand how me being unaware of the readonly attribute is a valid reason for downvoting my question. We all have our areas of weakness. I'm trying to improve mine by creating a carefully crafted question that addresses an issue I couldn't find an answer for with any of my current knowledge. Is that not valid? I don't/didn't know about the readonly attribute and it didn't come up in any of my research because I was focusing on "the point at which an input field's text becomes its value". – Luke May 10 '17 at 00:21
  • 1
    @Luke What tone? There is no evidence that zzzzBov voted on your question. – Daedalus May 10 '17 at 00:22
  • @Daedalus - I was referring to his initial comment. – Luke May 10 '17 at 00:23
  • 1
    @Luke I don't see any tone in that comment. They answered your question then wondered why you weren't using a particular feature. The only 'tone' I see is confusion, nothing untoward. – Daedalus May 10 '17 at 00:24
  • @Daedalus - fair call. His overall approach seems odd to me as he clearly has the answer to the question but provided it in the form of comments - which isn't useful for people searching for an answer to this question. – Luke May 10 '17 at 00:29
  • 1
    @Luke Some people don't like to answer questions and instead post the answers in comments. I've done the same before. It's personal preference, and their loss if they decide they don't want to get or lose any rep from the post. – Daedalus May 10 '17 at 00:30
  • @zzzzBov I apologise if I misread your comment - I thought you were belittling my question. My question re down-voting was sincere but poorly worded. What I meant was: "Did you down-vote my question because I was unaware of a possible solution? If so, that doesn't seem very Stack Overflow..." – Luke May 10 '17 at 00:31
  • 1
    You may also want to investigate `blur` and `focus` events and when they should be used instead of `click` – Jon P May 10 '17 at 02:10
  • Thanks @JonP - much appreciated! I have updated the code in my question to use `focus` instead of `click` and have made allowance for use of the Tab key once a user has selected an input. I do my best to adhere to good coding practices. – Luke May 10 '17 at 03:00

3 Answers3

2

If you want your textbox to be uneditable; use the readonly attribute.

<input type='text' readonly>

that way, its protected (sort of, can still be changed with dev tools) but can also be passed via <form>

Don Bhrayan Singh
  • 474
  • 4
  • 9
  • Thanks Don Brahayn Singh. Could you also add the info you put in your comment on my question regarding keypress and keyup. That is useful information. – Luke May 10 '17 at 00:25
1

I am answering this question as the relevant info has been given in fragments in the comments but not as an official answer. (Credit to @zzzzBov and @DonBhrayanSingh - thank you.)

Text entered into an input text field becomes the value of that input on keypress or keyup.

Once the keyboard signal reaches the DOM, it becomes part of that input's value (despite the fact that this is not reflected in Chrome Developer Tools - under either the Elements or Properties tabs). In other words, the value is updated every time a key is pressed.

I am still unable to find any official documentation to support the above (but I did find this SO answer which mentions it in passing). I expect this is due to my lack of correct terminology to enable me to search and locate relevant info.

In my particular case, where I was using jQuery to prevent users from entering text into fields that had an existing value, using the readonly attibute on the pre-populated input elements is a more elegant solution.

Community
  • 1
  • 1
Luke
  • 4,825
  • 2
  • 30
  • 37
0
// You can use the blur event to have something happen on leaving the 
// input field
$('input[type="text"]').on('blur', function(){
    /* if you want to write any condition you may write here before 
    declaring it as read only */
    $(this).attr('readonly', 'true')
})
Rajalakshmi P
  • 63
  • 4
  • More on 'readonly' attribute can be found on [link](https://www.w3schools.com/tags/att_input_readonly.asp) and more on jquery 'blur' [here](https://api.jquery.com/blur/) – Rajalakshmi P May 10 '17 at 00:15