Javascript state for saved values in fields? - javascript

I'm using a javascript library to move field labels into the field itself. When the user starts typing in the field, they fade out. However, when the user has saved their username/password in the fields, the library isn't smart enough not to put the labels in the fields, so the text of the label is overrun with the username or the obfuscated password.
Is there a state of the pre-populated fields I could query with javascript to selectively disable moving the labels into the fields?
Edit this is the library that I'm using: In-Field Labels jQuery Plugin
I see that there has been a vote to close this question because it is unclear. Let me try to be more clear. When the page loads, there is a saved username and password in the username and password fields. I am wondering if there is some property on these fields that will tell me if they are populated with saved values when the page finishes loading. If this is unclear please ask a clarifying question.
The reason I want to know this is because I am using a javascript library that puts a field's label visually within its field, so you get [Username____] instead of Username [________]. The problem is when the browser has saved the username, then the text "Username" in the field runs over the saved username also in the field. I want to stop the moving of the field label into the field only if there is a value already in it. So I am looking for a way I can tell if the field is pre-populated.

I think what you are talking about is a PlaceHolder attribute :
A hint to the user of what can be entered in the control . The placeholder text must not contain carriage returns or line-feeds. This attribute applies when the value of the type attribute is text, search, tel, url or email; otherwise it is ignored.
See this JSFiddle :
<input type="text" placeholder="label"/>
For a cross browser compatibility, see this plugin : https://github.com/mathiasbynens/jquery-placeholder

Related

Autocomplete navigator chrome firefox edge

I have a form and there are two fields that chrome autocompletes. These fields are the email and the password.
I don't want it to autocomplete, and I've tried this:
autocomplete="off"
This works for fields that are of type text, like name. This one with that characteristic no longer reminds me.
But the password even with that keeps reminding me.
I have investigated changing the name and the ID and nothing keeps reminding me.
Until I have removed the typo and put text on it. Now it doesn't remind me or autocomplete it. But of course I can't let users enter passwords and see them.
I have tried with js to put the type text and when the user clicks on it (onFucus) it will change it to type password. But of course when the user clicks, I get a password type and now the browsers remind me of the passwords again.
My question is this:
I can put this text type input but every time the user writes, asterisks appear.
Set autocomplete to false in your form's opening tag -> <form autocomplete="false">. False works cross-browser, and you can see an explanation as to why here: Autocomplete off vs false?
In the end, to solve this problem, I changed the input type to text. With that it no longer tells me the passwords.
But how to solve the problem that passwords are seen?
Very simple, a font has been created that is all circles imitating passwords.

How do I create a hyperlink inside an input text field in html?

I have an input text field in which the user can enter the name of a website. Is it possible for it to be hyperlinked so that once the field is saved, if the user clicks on it, it redirects to the website?
I use Django for the backend and Javascript and html for the front end.
An input field's value is stored as plain text, therefore you cannot include HTML (i.e. a link) and expect the HTML to be parsed and functioning.
You could simulate this behavior with JavaScript, however I would recommend against it. (You would add a click listener, your function would pull the value of the field, see if it is a valid URL, and then open up the location.)
I'm not going to write the code for this because it would be a terrible user experience. The standard behavior for an input field is that you click on it to edit the text. This is an assumption your users have, and they would therefore (a) not think to click on it because they don't expect it to be a link, and (b) click in it if they wanted to edit the text, only to be redirected and unable to edit the text.
Alternatively, you could add a small button next to the input, i.e. 'Open' or 'Test' or an external link icon.
Simply, if you are printing the URL for the user on their profile page, sure you can just print it as follows:
<a href='$url'>$url</a>
That's PHP but of course you can do this in any language. I'm not sure if this answers your question since you ask if it can be printed "inside" the field which isn't possible/doesn't make sense.
HOWEVER, think about security. Remember the user can enter any malicious URL into this field, so you need to be aware of who you are potentially linking this to on your website/application.
Useful resources:
URL HTML field:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/url
Validate URL format with Django (does not check if malicious or not though):
How can I check if a URL exists with Django’s validators?

How could the programe locate the input-box of user-name and password on the html page exactly?

I'm trying to implement an function that auto-fill form(maybe,some page just input-box and submit button) with python and selenium.
It is similar to browser's auto-fill form: parsing the web page, locate input-box of user-name and password on a page, and auto fill them next time.
The problem is about how to locate the username input box or password input.
I look for a way which could handle most of page,but encountered several problems:
The user name and password of some pages are not in the form label;
There are not only user name and password entry box, but also have the verification code input box;
The name of input-box not only as "username" or "password".It maybe another word.So I can not judge by name of the username input box or password input box.
Some methods have been tried, such as:
Password input box with password attribute;
The user name input box is near the password input box;
But the effect is not ideal.
Is there any good method or suggestion? How does the browser do it?
Here its something difficult to answer your question because you do not mention any reference anyway I am giving your 2 example image where you can find the most efficient way to find XPath
Hope it will help you to find your Right XPath
There is no way to generalize a way to automate all web pages as far as I know,as elements in DOM vary in each and every page and so you need to change in xpath locator accordingly.I know its tiresome! uff..:-(
However do have a look into Sikuli and see if this can serve your needs.
Brief overview of Sikuli mentioned in their site:
Sikuli automates anything you see on the screen. It uses image
recognition to identify and control GUI components. It is useful when
there is no easy access to a GUI's internal or source code.
More info:
http://www.sikuli.org/

KnockoutJS & HTML5 Required Attribute & Visible: No

In my form, the user can toggle the visibility of certain form elements using Knockout in order to save space. If the elements are visible and the user has not filled out the required fields, when they press the save button, HTML5 will notify the user of the required fields. However, when the elements are hidden, the save silently fails in that pressing the button does nothing.
The only indication to the user that something is wrong is that the save button does not respond. Of course in the console it has the familiar message 'An invalid form control is not focusable'.
Have you dealt this with issue before? How did you address it? I don't want to take away the required attribute. I suppose that one solution could be to validate with JavaScript for those types of fields instead of HTML5. Suggestions are appreciated.
Similar question:
An invalid form control with name='' is not focusable
use form submit instead of read value from selector. because HTML5 required filed will work if form get submitted.

how to password protect any field in form (wants suggestions)

Here I want to create one field(select box- dropdown) in form which is password protected.
when user click on that dropwon one prompt appears, over here user enter the password , and if password is correct then and after then user can select value of that dropdown box.
so how i can achieve this functionality?
Simple:
disable/hide the select
onclick: open a prompt or dialog
onsubmit: send the data via AJAX and check the password in background with PHP (or another server-side language)
enable/show the select, if the password was right
Notice:
Javascript is readable by the client, you've to check the password with PHP (or another server-side language). If you write the password in Javascript, the user could figure it out by reading the source code.
The user could manipulate the HTML and Javascript local. You must verify all of his sent data on the server side.
By the way
I would enable/disable the select due to the users rights
I am afraid there is no pre-made solution for you - you will have to develop your own, i.e. display disabled dropdown initially, display your own password form pop-up on click event, compare if passwords match and if they do, finally enable the dropdown.
The most challenging issue here will be password protection. If you want to have this feature at least a little secure, you can't just include correct password in your js/jquery source code. Either use encryption or AJAX for that.
You could position a invisible div over the field absolutely, and listen for a click event on that div. If the password is correct remove the div.
If you wanted to be security conscience I wouldn't include the dropdown at all unless they get the password right. Return the contents of the select once the password is correct.
Once the password is correct you can populate the selectfield and open it.
Because even if you disable the select like others are saying there is nothing stopping someone from going into the html and enabling it. It needs to be unavailable unless verified.

Categories

Resources