0

I'm trying to write a function, that prevents user, from typing more than one character in the input. Basically, every time user hits any key, the function checks, input value's length, and if it's greater than 1, it sets input value to the first character of typed word. Will this code work out, and if not, how should it look like? (as I mentioned in title, I'm also using jQuery):

function keepOneLetter(){
 $("input[type='text']").keypress(function(event){
    if($("input[type='text']").val().length > 1){
        $(input[type='text']).val() = $(input[type='text']).val($(this).val()[0])
    }
}) }

Update

This has been proposed as a duplicate of this one. Well, it could be like that, because:

  1. When I typed title to search bar (preventing user from typing multiple characters in the input with JS/jQuery), no results popped up, because I mentioned JavaScript and jQuery, while the first question didn't to it at all.
  2. Speaking of JS/jQuery, if you compare tags, you'll notice, that I used javascript and jquery tags, while the other question had html, forms, input, textbox, so if you were looking for post about, let's say javascript, you wouldn't find original post.
  3. Eventually, I stuck to HTML solution, as it didn't require JS at all, and it was much faster than writing whole function myself. Well, there was an answer, in which someone wrote function as I initially wanted, and it worked too, but probably due to choosing html solution, Stack Overflow thought, that I've just looked at previously mentioned question, as the best solution considered by author of mentioned above question, was very similar to best solution of my problem.
  4. Using HTML is optional, it's up to you, whether you stick to pure JavaScript, libraries like jQuery or just HTML. As I said, I used HTML, because it was faster. But I could also use function.
halfer
  • 19,824
  • 17
  • 99
  • 186
  • @VigneshRaja I've explained my statement above. Please read it. –  Jun 30 '18 at 07:46
  • 1
    The update in the question, as to why the question is not a duplicate, seems to misunderstand the reason why we ask for these updates. It was a bit too hostile (now edited out), but also it seemed to say "it might be a duplicate but it isn't my fault because the search system is terrible". What we're interested in is whether it is a duplicate (and we don't care whose fault it is `;-)`). If it _is_ a duplicate, don't worry about it - even experienced programmers fail to find things sometimes. – halfer Sep 01 '18 at 15:19
  • 1
    I know that boilerplate comments can _seem_ like they are an attack on you or your work, but in fact they are not. I'd therefore advise that any question updates are written with a gentle and considerate tone - stuff like "read my question carefully" is _very_ likely to be understood as condescending and patronising. Lengthy sermons about how to read questions don't generally go down to well either (that you have no downvotes is a small miracle). – halfer Sep 01 '18 at 15:21
  • If using JS is a requirement ... why is the accepted answer the one with html? – Jonas Wilms Sep 01 '18 at 19:37
  • Ok, thank you for future advices guys! I didn't want to complain about stackoverflow's search system or sth... also, @JonasWilms, you don't have to apply accepted solution, optionally you can apply the one with JS ;) And yeah halfer, I can agree with you, but even if programmer can't find sth on internet, he/she might either use different search queries or eventually come up with solution him/herself... –  Sep 03 '18 at 09:30

2 Answers2

5

What about maxlength?

<input type="text" name="letter" maxlength="1">

This is not javascript, but it works better with less code.

mbuechmann
  • 5,413
  • 5
  • 27
  • 40
  • Hmm, I remember, that earlier in a webdev course (I started it on January, still haven't finished), I had exercise, in which I had to use it (befeore I got to know JS), That's good solution IMO. Still, I'll have to use JS, as I want maxlength attribute, when I'm using specific JS (look back to my previous threads, and you'll know, what I'm talking about) –  Jun 29 '18 at 07:17
  • 1
    Seamless Javascript!! – Harshal Yeole Jun 29 '18 at 07:28
  • @mbuechmann Thank you very much, your code works as I expected! –  Jun 29 '18 at 07:37
1

Try this code:

$('.onealphaonly').bind('keyup', function() { 
    const node = $(this);
    node.val(node.val().replace(/^([a-zA-Z]).*/g, '$1'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="onealphaonly"/>
Harshal Yeole
  • 4,812
  • 1
  • 21
  • 43
  • Alright, I'll check this one out... –  Jun 29 '18 at 07:14
  • 1
    You can by click on **Run code snippet** button – Harshal Yeole Jun 29 '18 at 07:16
  • Yeah, it works fine, but I guess that @mbuechmann came out with better solution. But thank you for help anyway –  Jun 29 '18 at 07:22
  • 1
    okay cool.. good day – Harshal Yeole Jun 29 '18 at 07:26
  • Same to you dude –  Jun 29 '18 at 07:27
  • Ok, as it also works! But I'll opt to @mbuechmann's solution, as it requires less JS. Don't get me wrong, your code is very good, but _maxlength option_ is also faster, i.e. I don't actually have to type out the whole function myself, because, it kinda already exists within this property. –  Jun 29 '18 at 07:35