Revealing a hidden field by highlighting it

Question

1.00/5 (2 votes)

See more:

Hi CPs,

I am currently developing a learn-to-hack website. I have some hidden inputs that should be revealed when certain part of the text is highlighted. Is there any way to do it with just java script? Or is there a better way?

Awaiting your answers :)

Posted 14-Jun-15 7:38am

Ashwin2013

Add a Solution

2 solutions

Solution 1

You can change the hidden input to a text or number input field by changing the type property. Which is not alter-able. You cannot change the property "type" of the input elements. So, you might have to change the entire element (, add a new child at the node, or perhaps show another element) so that the hidden input now gets shown on the screen.

Posted 14-Jun-15 9:14am

Afzaal Ahmad Zeeshan

Comments

Sergey Alexandrovich Kryukov 14-Jun-15 15:58pm

I don't know why would you think that the change of attribute "type" would be needed and why do you think it cannot be changed. Perhaps you did not understand the question; I also misunderstood it at first, fixed my answer later — please see Solution 2.
—SA

Afzaal Ahmad Zeeshan 15-Jun-15 10:34am

Well yes, that is what happened. Hidden inputs, inputs of hidden type, (visually) hidden inputs are all so much ambiguous among each other. And I also had the same thought that you had, how can someone teach hacking when he doesn't even know that there is no such thing as Java Script and, how to change the display properties of a control. Funny!

Anyways, Sergey, didn't you know changing the type of an input element throws security warning in browsers. Wonder what would happen, if someone executes the command to change the type of password type inputs to text? So, browsers throw an error, saying, "type property can't be changed". Here, is an example for you to test if you're interested in. :-)

For more on Security thingy, please read this.

Sergey Alexandrovich Kryukov 15-Jun-15 10:55am

Funny indeed. I certainly did not know about the change of type (and never though about such a weird thing), thank you very much.
—SA

Afzaal Ahmad Zeeshan 15-Jun-15 11:13am

You are very much welcome sir, I am glad that you got to learn something from me too. :-)

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Accepted Answer · 2015-06-14T09:56:00

Solution 3

Please forgive me my unpleasant question, but how could you possibly write some content helping people to learn "hacking" (why, by the way?) if you unaware of the simplest basic techniques (by far, not hacks) yourself?

You can do it, for example, using this CSS:

CSS

input.hidden { color: white; background-color: white; }

Don't forget to give the class "hidden" to your input element.

You can change the class used by any element using JavaScript at any time:

JavaScript

myElement.className = "someOther class";

Please see: https://developer.mozilla.org/en-US/docs/Web/API/Element/className[^].

The same element can have several classes: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList[^].

Also, if you choose to use jQuery, you will find that everything is already done for you.

—SA

Posted 14-Jun-15 9:56am

Sergey Alexandrovich Kryukov

Comments

Ashwin2013 14-Jun-15 16:20pm

Sergey thank you very much for your answer. And about your question, I specifically asked for java script. CSS is an easy way out. I want them to understand how tuning java script can help exploit resources.

P.S. Big Fan

Sergey Alexandrovich Kryukov 14-Jun-15 21:53pm

CSS is not an alternative to JavaScript. (By the way, there is no such thing as "java script"; Java is not a scripting language ;-) CSS should always be used unless you want to use all default styles, but JavaScript might be not. Of course, with JavaScript you can devise way more flexible solutions. You can also directly set style properties one by one via JavaScript:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style.
—SA

Ashwin2013 14-Jun-15 22:16pm

When I said java script I meant JavaScript aka JS. And flexible solutions are what I am looking for.

Sergey Alexandrovich Kryukov 14-Jun-15 22:21pm

This is great. But it's just that you cannot use the expression "Java script" at all. There is "JavaScript" and totally unrelated Java. The blankspace between those to words is incorrect.
—SA