Jquery : Copy masked password value correctly - javascript

In my rails application I have a form where I am showing password field and on jquery ajax success callback I am updating the value inside the password field.
Example :
$("#some-field").val('password-value');
After doing this, field is updated with the password and I see masked password in the password field.
Now My Requirement is I need to copy this masked password value and have to use it in some other browser window and need to paste in some other website's password field.
So I am searching for a good way to achieve this.
Till now I got many jquery plugins which are masking the value for normal input text field using mask(), but the problem I am facing is copying of masked value and mainly value should get copied properly when used in some other places.
Can any one has any idea on this..
Thanks you in advance
Dean

You can put in an invisible input, in localStorage, in a javascript variable encoded send to server with ajax and decode there. than do what you want with it. I hope I understood well what you asked.
I think This is what You want:
function copyToClipboard (text) {
window.prompt ("Copy to clipboard: Ctrl+C, Enter", text);
}
function displayResult()
{
var x=document.getElementById("password").value;
copyToClipboard(x);
}
displayResult();;

Related

Is it possible to manually edit data after a dropdown auto-populates the field?

I am the opposite of a code monkey, so please forgive me if this is a simple solution. I have searched and searched and though I've found possible code examples, cannot find any information on how to fix the issue.
I've created a form-fillable PDF. I have fields that calculate based on inputs. I have a dropdown box that auto-populates some of the numbers (to add to the manual inputs). All of these work great!
I thought I would get fancy and further fill some of my data in the form. This is where the problems get funky.
I am setting the fields as shown, but those numbers can no longer be modified afterward.
this.getField("RanksPsy").value = psy;
this.getField("RanksBlade").value = blde;
this.getField("RanksBrawl").value = brwl;
this.getField("RanksCou").value = cou;
this.getField("RanksDip").value = dip;
I have buttons to increase/decrease the Ranks... fields, but the dropdown locks them and I'd like to avoid that if possible.
Is there another way to set those fields without using this.getField?
Thank you.
If I'm honest, I didn't understand the question well 😅
I don't recognize the getField function, so I decided to google it and found a RAD PDF documentation, so I'm assuming that's the library you're using to do this.
As that documentation states,
getFunction gets the first PDF form field object in the loaded
PdfWebControl document with a given name.
And this is the example provided, it may help.
var field = myApi.getField("Test Name");
if(field) {
//set its name to "New Name"
field.setProperties( {"name" : "New Name"} );
}
The solution to this is to put the script as an 'on blur' event rather than a keystroke event. It writes the data and then leaves it alone, which is exactly what I was looking for.

How can I get around a keypress requirement on a javascript textbox?

Hello and thanks for reading.
So I am trying to automatically log into this form using Chrome.
https://app.patientaccess.com/login
I use my own Chrome extension to do this. It's basically just a javascript file that fills in the fields automatically. I use it for a range of websites.
For example, this is my function for filling in a textbox:
function fld(param, val){try{document.querySelectorAll(param)[0].value = val} catch(e){}}
And I call it like this:
fld("input[id='loginForm-email']", "mail#myemail.com")
For most websites it works. But for the Patient Access website above, it doesn't and I think the reason is because the password textbox requires a physical keypress (or listening for a change event or something).
When I run my script, it fills in the textboxes just fine but it doesn't let me click next because, even though the textboxes appear to be filled in, the webpage knows that I haven't actually pressed any keys.
To get around it, I have to have my script fill in the form, then click in the password box, press space, delete the space I just entered and then it lets me sign in because it knows I have physically pressed a key in the password box.
So my question is how can I make my automatic sign in javascript work on this website?
I don't think a script can use keypress events to type into a textbox but that's ok because I can fill in the textbox programmatically (using the fld function above). But how can I convince the page that I have typed into the password textbox so it lets me submit the form?
I am using JavaScript as I said and I can include jQuery if needed.
Thanks.
After much trial and error, I was able to solve it with JavaScript using this:
var fireOnThis = document.querySelectorAll("[type='text']")[0]
const changeEvent = new Event('input', { bubbles: true, cancelable: true });
fireOnThis.dispatchEvent(changeEvent);
It works absolutely beautifully. I turned this into a function and all I do is run this function after automatically filling in the text field (it doesn't work before filling in the field, has to be after).
I tried many other solutions on other websites and none worked but this one does. Whee!
I got the concept from a Chrome Extension called Form Filler. I tried the extension on the form I was trying to automate and to my surprise, it filled in the form without issue. So I looked at the source code to find out how it did it and I found this:
['input', 'click', 'change', 'blur'].forEach(event => {
const changeEvent = new Event(event, { bubbles: true, cancelable: true });
element.dispatchEvent(changeEvent);
});
So I just converted that into the code in my answer and it worked a treat. So credit should really go to Hussein Shabbir, the developer of Form Filler.

check with javascript if textbox is empty while using ajaxcontroltoolkit TextBoxWatermark

I have an asp.net TextBox and I'm using the TextBoxWatermark of AjaxControlToolkit to have it display some hing text while the box is empty.
Problem is, onclient click of a certain button, I want to determine if the textbox is empty. The javascript code of
document.getElementById(fieldName).value == ""
Is not working, since the WaterMark extender with it's hint text making the code to think the field is not empty.
Any solution to this?
You can use the wrapper to access whether the watermark is being displayed or not with get_IsWaterMarked.
Sys.Extended.UI.TextBoxWrapper.get_Wrapper(document.getElementById(fieldName)).get_IsWatermarked()
I tried this with version 4.1.7.1213 of AjaxControlToolKit.
Got the code from looking at the source code of the TextBoxWatermark control.
Refer to this: http://ajaxcontroltoolkit.codeplex.com/SourceControl/latest#Client/MicrosoftAjax.Extended/TextboxWatermark/TextboxWatermark.pre.js

Jquery Validate - Input Mask Conflict

I have a form that uses jquery validate and the form validates on submit and on blur (onfucusout). Some of my fields have masks using the jquery mask plug in. The mask will place something like this in the field (---)---/---- when it comes into focus. When the user clicks out of this field the (---)---/---- disappears. My problem is that although the field is left black it is throwing the validation error thinking that the user has typed in (---)---/---- instead of just leaving it blank.
My first thought was to put a delay on the validate so that it validates after (---)---/---- disappears. My question is how do have set the validate to delay so that it evaluates the field after the characters are gone? If this isn't the right fix can someone help me fix this issue.
Again i think it is caused because the validation is triggering before the mask characters are going away. I need it to validate after the masked place holders disappear. Thanks for any help.
The way I addressed this problem.
Input Mask in my case : "(999) 999-9999"
For my test example i did the following :
(1) The first thing i did was determined what characters were being generated in my DOM.
e.g.
using the below code in FireBug Console.
$('#MyPhoneNumberID').keydown(function(){
console.log($(this).val())
In my case it was spitting out the following (_) -___
(2) The work around I used was to update my regular expression(for phone) and include the mask as part of the regular expression
e.g. "(_) -___" OR correct typed in phone numbers was allowed.
Regular Expression used :
"^(?:+)?(1)?(?:\s*(?:-|.|()?\s*)?(\d{3}|_{3}|\s{3})(?:\s*(?:-|.|))?\s*)?(\d{3}|_{3}|\s{3})(?:\s*(?:-|.)?\s*)?(\d{4}|_{4}|\s{4})$"
Hope this helps!

HTML & Javascript: Using a customized Text Input for Password input

I want to re-invent the password input in HTML.
Okay, here is the work I'd done:
http://www.symplik.com/password.html
(It just a plain html code, nothing really fancy :>)
The "password" is indeed a text input, and I used the onkeyup event to rewrite the input to masking characters.
There're two problems:
(1) backspace or delete cannot be detected
(2) if I type very fast, some characters cannot be captured promptly.
For problem (1). it is partially solved by checking the length of text in the password field and the stored password. Not a very elegant solution anyway.
For problem (2), I'd tried to insert some time delay function in between but still fail. I'd make the field readOnly after every keyUp but it still behaves the same.
Why not use
<input type='password'>
It masks the input for you. No need for javascript.

Categories