JQuery UI Dialog: Password inputs causing freezing - javascript

This is a odd behavior that seems to only happen in Chrome and with JQuery UI. When entering characters into a password field at first everything functions correctly. However, if you attempt to backspace to the last letter in the input, the browser locks up all client side operations. Also, if you try and highlight the characters entered and backspace the client side operations freeze.
Just reaching out to see if anyone has encountered this same issue, and how they resolved it.
In order to experience the issue, we have the dialog auto opening on 2+ unique page home views. Here is a listings page so it can be triggered, I apologize for the inconvenience but I can't remove the counter.
Page: http://www.christineleeteam.com/area/eagleharbor

I had the same problem but cache clearing didn't help. I'm sure it isn't a jquery ui bug.
Here is my solution:
$('input[type="password"]').on('keydown', function(event){
if (event.which == 8) { //backspace event
event.preventDefault();
$(this).val('');
}
});
This code is clearing the whole password field on one backspace event.

We encountered the same issue, and used Benkod's solution.
We improved it a little to also handle cases where the password text is deleted with the delete key (and not backspace).
Another case is when all the text in the control is selected and new text is typed to replace it.
Here is the script we used:
Sys.Application.add_load(function() {
$('input[type=password]').keydown(function(event) {
var isAllTextSelected = this.value.slice(this.selectionStart, this.selectionEnd) == this.value;
var isLastChar = $(this).val().length == 1;
if (isAllTextSelected && $(this).val().length > 0) {
$(this).val('');
}
if ((event.which == 8 || event.which == 46) && (isLastChar || isAllTextSelected)) { //backspace event
event.preventDefault();
$(this).val('');
}
});
});

Same problem here (FWIW, I'm using Twitter Bootstrap, but the issue was the same). It looks like it's caused by having a lot of content preceding the input. Placing the input higher--above the bulk of other content--did the trick for me. A work around, but better than nothing.

Related

jQuery event triggered by space

I'm trying to have a next button disabled untill 30 seconds after the space bar has been pressed using jQuery in qualtrics. I've tried a lot of suggestions that have already been made, but nothing seems to work. If anyone could help me out here I'd be super grateful, I'm at a real dead end.
Thanks in advance
Qualtrics.SurveyEngine.addOnload(function() {
/*Place Your Javascript Below This Line*/
var InputId = $("QR~" + this.questionId);
InputId.style.display = "none";
this.disableNextButton();
if (e.keyCode === 0 || e.keyCode === 32) {
this.enableNextButton.delay(30);
}
})
$ in Qualtrics is referring to prototypejs.
You would need to run jquery noconflict to be using jquery, and using the correct identifier to match.
Additionally, you have no event handler to capture your keypress.

How to hide form code from view code/inspect element browser?

I want to hide form code from view code/inspect element browser , how can i do that ?
This is my code, please see below:
<div style=" text-align: center; padding: 300px; font-family: lato; ">
Please wait redirect page ......<br>
<img src="http://maps.nrel.gov/sites/all/modules/custom_modules/hydra/assets/images/loading_bar.gif" border="0">
</div>
<form name="f1" action="payments.php" method="post">
<input type="hidden" name="id_crad" value="...">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="amount" value="12.99">
</form>
<script type="text/javascript">
setTimeout(function(){f1.submit();}, 3000);
</script>
Please see picture
You simply can't.
Code inspectors are designed for debugging HTML and JavaScript. They do so by showing the live DOM object of the web page. That means it reveals HTML code of everything you see on the page, even if they're generated by JavaScript. Some inspectors even shows the code inside Iframes.
How about some JavaScript to disable keyboard / mouse interaction...
There are some JavaScript tricks to disable some keyboard, mouse interaction on the page. But there always are work around to those tricks. For instance, you can use the browser top menu to enable DOM inspector without a problem.
Try theses:
Firefox: ☰ > Tools > Web Developer > Inspector
Chrome: ⋮ > More Tools > Developer Tools > Elements
They are outside the control of JavaScript.
Big Picture
Think about this:
Everything on a web page is rendered by the browser, so they are of a lower abstraction level than your JavaScript. They are "guarding all the doors and holding all the keys".
Browsers want web sites to properly work on them or their users would despise them.
As a result, browsers want to expose the lower level ticks of everything to the web developers with tools like code inspectors.
Basically, browsers are god to your JavaScript. And they want to grant the web developer super power with code inspectors. Even if your trick works for a while, the browsers would want to undo it in the future.
You're waging war against god and you're doomed to fail.
Conclusion
To put it simple, if you do not want people to get something in their browser, you should never send it to their browser in the first place.
There is a smart way to disable inspect element in your website. Just add the following snippet inside script tag :
$(document).bind("contextmenu",function(e) {
e.preventDefault();
});
Please check out this blog
The function key F12 which directly take inspect element from browser, we can also disable it, by using the following code:
$(document).keydown(function(e){
if(e.which === 123){
return false;
}
});
You can add this script to make a error when user inpect :D
Try this code
<script type="text/javascript">
eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('(3(){(3 a(){8{(3 b(2){7((\'\'+(2/2)).6!==1||2%5===0){(3(){}).9(\'4\')()}c{4}b(++2)})(0)}d(e){g(a,f)}})()})();',17,17,'||i|function|debugger|20|length|if|try|constructor|||else|catch||5000|setTimeout'.split('|'),0,{}))
</script>
From http://www.bloggerku.com/2017/08/memasang-anti-inspect.html
You can use this code -
Block Right Click -
<body oncontextmenu="return false;">
Block Keys - You should use this on the upper of the body tag. (use in the head tag)
<script>
document.onkeydown = function (e) {
if (event.keyCode == 123) {
return false;
}
if (e.ctrlKey && e.shiftKey && (e.keyCode == 'I'.charCodeAt(0) || e.keyCode == 'i'.charCodeAt(0))) {
return false;
}
if (e.ctrlKey && e.shiftKey && (e.keyCode == 'C'.charCodeAt(0) || e.keyCode == 'c'.charCodeAt(0))) {
return false;
}
if (e.ctrlKey && e.shiftKey && (e.keyCode == 'J'.charCodeAt(0) || e.keyCode == 'j'.charCodeAt(0))) {
return false;
}
if (e.ctrlKey && (e.keyCode == 'U'.charCodeAt(0) || e.keyCode == 'u'.charCodeAt(0))) {
return false;
}
if (e.ctrlKey && (e.keyCode == 'S'.charCodeAt(0) || e.keyCode == 's'.charCodeAt(0))) {
return false;
}
}
</script>
This code removes the inner html of an element from the dom when the debugger is open (tested in Chrome and IE)
var currentInnerHtml;
var element = new Image();
var elementWithHiddenContent = document.querySelector("#element-to-hide");
var innerHtml = elementWithHiddenContent.innerHTML;
element.__defineGetter__("id", function() {
currentInnerHtml = "";
});
setInterval(function() {
currentInnerHtml = innerHtml;
console.log(element);
console.clear();
elementWithHiddenContent.innerHTML = currentInnerHtml;
}, 1000);
Here #element-to-hide is the id of element you want to hide.
It is a hack, but I hope it helps you.
While I don't think there is a way to fully do this you can take a few measures to stop almost everyone from viewing the HTML.
You can first of all try and stop the inspect menu by doing the following:
<body oncontextmenu="return false" onkeydown="return false;" onmousedown="return false;">
I would also suggest using the method that Jonas gave of using his javascript and putting what you don't want people to see in a div with id="element-to-hide" and his given js script to furthermore stop people from inspecting.
I'm pretty sure that it's quite hard to get past that. But then someone can just type view-source:www.exapmle.com and that will show them the source. So you will then probably want to encrypt the HTML(I would advise using a website that gives you an extended security option). There are plenty of good websites that do this for free (eg:http://www.smartgb.com/free_encrypthtml.php) and use extended security which you can't usually unencrypt through HTML un encryptors.
This will basically encrypt your HTML so if you view the source using the method I showed above you will just get encrypted HTML(that is also extremely difficult to unencrypt if you used the extended security option). But you can view the unencrypted HTML through inspecting but we have already blocked that(to a very reasonable extent)
Ok so you can't fully hide the HTML but you can do an extremely good
job at stopping people seeing it.(If you think about it most people
don't care about looking at a page's HTML, some people don't even know
about inspecting and viewing the source and the people who do probably
won't be bothered or won't be able to get past theses implications! So
probably no one will see you HTML)
(Hope this helps!)
Below JavaScript code worked for me to disable inspect element.
// Disable inspect element
$(document).bind("contextmenu",function(e) {
e.preventDefault();
});
$(document).keydown(function(e){
if(e.which === 123){
return false;
}
});
While I don't think there is a way to fully do this you can take a few measures to stop almost everyone from viewing the HTML.
You can first of all try and stop the inspect menu by doing the following:
I would also suggest using the method that Jonas gave of using his javascript and putting what you don't want people to see in a div with id="element-to-hide" and his given js script to furthermore stop people from inspecting.
I'm pretty sure that it's quite hard to get past that. But then someone can just type view-source
This will basically encrypt your HTML so if you view the source using the method I showed above you will just get encrypted HTML(that is also extremely difficult to unencrypt if you used the extended security option). But you can view the unencrypted HTML through inspecting but we have already blocked that(to a very reasonable extent)
You can use the following tag
<body oncontextmenu="return false"><!-- your page body hear--></body>
OR you can create your own menu when right click:
https://github.com/swisnl/jQuery-contextMenu
you can not stop user from seeing our code but you can avoid it by disabling some keys
simply you can do <body oncontextmenu="return false" onkeydown="return false;" onmousedown="return false;"><!--Your body context--> </body>
After doing this following keys get disabled automatically
1. Ctrl + Shift + U
2. Ctrl + Shift + C
3. Ctrl + Shift + I
4. Right Click of mouse
5. F12 Key
While I don't think there is a way to fully do this you can take a few measures to stop almost everyone from viewing the HTML.
You can first of all try and stop the inspect menu by doing the following:
I would also suggest using the method that Jonas gave of using his javascript and putting what you don't want people to see in a div with id="element-to-hide" and his given js script to furthermore stop people from inspecting.
I'm pretty sure that it's quite hard to get past that. But then someone can just type view-source:www.exapmle.com and that will show them the source. So you will then probably want to encrypt the HTML(I would advise using a website that gives you an extended security option). There are plenty of good websites that do this for free (eg:http://www.smartgb.com/free_encrypthtml.php) and use extended security which you can't usually unencrypt through HTML un encryptors.
This will basically encrypt your HTML so if you view the source using the method I showed above you will just get encrypted HTML(that is also extremely difficult to unencrypt if you used the extended security option). But you can view the unencrypted HTML through inspecting but we have already blocked that(to a very reasonable extent)
<script>
document.onkeydown = function(e) {
if(event.keyCode == 123) {
return false;
}
if(e.ctrlKey && e.keyCode == 'E'.charCodeAt(0)){
return false;
}
if(e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0)){
return false;
}
if(e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0)){
return false;
}
if(e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)){
return false;
}
if(e.ctrlKey && e.keyCode == 'S'.charCodeAt(0)){
return false;
}
if(e.ctrlKey && e.keyCode == 'H'.charCodeAt(0)){
return false;
}
if(e.ctrlKey && e.keyCode == 'A'.charCodeAt(0)){
return false;
}
if(e.ctrlKey && e.keyCode == 'E'.charCodeAt(0)){
return false;
}
}
</script>
Try this code
if someones is interested you can delete the form node from the DOM after the submission and it won't be there using the inspector.
https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove
I did some digging for your question and found an intriguing idea by PwnFunction.
If you can fit your complete code into your CSS file. Then we can use the response header "Link" to link your CSS file to your request for the site.
According to MDN Docs:
HTTP headers let the client and the server pass additional information
with an HTTP request or response. An HTTP header consists of its
case-insensitive name followed by a colon (:), then by its value.
Whitespace before the value is ignored.
The Link entity-header field provides a means for serializing one or more
links in HTTP headers. It is semantically equivalent to the HTML link
element.
So this header can link your stylesheet to your HTTP request. So what will happen in the backend is that whenever someone tries to "inspect element" your source code, they'll see a blank page for your HTML code. But they can still see the link to your stylesheet in developer tools.

Field won't take focus after error

Probably going to be something really obvious that I can't find again. But any help, as always, is appreciated.
My javascript error messages and focus settings work fine with all of the validation functions on submit, but I can't get the field to take focus with the onblur validations. The error message correctly appears but the focus is going to the next field in the form.
Here's my code for the field in question Javascript first:
function validatexxxx()
{
var e = document.getElementById('xxxxNumber');
//check to see if the xxxx number is already in use.
for (i = 0; i < xxxxArray.length;i++) {
if (e.value == xxxxArray[i]) {
alert("That xxxx Number is already in use!");
e.focus();
return false;
}//end if e.value = xxxxarray
}//end for loop
var eText = e.value;
if (eText.length >= 15) {
alert("xxxx Number must be less than 15 characters long!");
e.focus();
return false;
}
return true;
}
And the html where the input is:
<tr><td>xxxx No.: </td><td><input type="textbox" id="xxxxNumber"
name="xxxxNumber" onblur="return validatexxxx();"/> </td> </tr>
It's the alert() that's causing the focus to go away. After the popup is displayed, you're setting the focus. But as user needs to click OK in the appeared popup window, the focus is lost.
Trying to force focus from a "blur" handler is inherently problematic. Try this: wrap you calls to .focus() in a timeout handler. That'll let the "blur" event complete before the attempt to set focus:
setTimeout(function() { e.focus(); }, 1);
Also, alert() can be problematic too, especially in Safari. That browser has (or had, in the past; I haven't tried lately) a tendency to imagine that the appearance of the "alert" window means that the main browser window has lost focus. After that, Safari will completely ignore any calls to .focus(). Your interface would look better with a custom "dialog" scheme, or some other way of reporting validation errors.
Try to put it in a closure like this.
e.focus(function() {
alert("xxxx Number must be less than 15 characters long!");
});

Looking for ibooks html input alternative

In IOS5 on the iPad, iPad2 etc. iBooks accepted <input type="color"> as a way to prompt the keyboard to display when you clicked on an input field, to say, type in the answer to a question. I've just recently updated to IOS6, and this workaround no longer seems to be working. I tried using the JavaScript I found here - http://www.linkedin.com/groups/How-Show-iPads-Keyboard-when-3877009.S.84287009
<script type="text/javascript">
function iPadTouchHandler(event) {
var type = "",
button = 0; /*left*/
if (event.touches.length > 1)
return;
switch (event.type) {
case "touchstart":
// OLD: On iPad2 clicking on a text input field did not show the keyboard
// if ($(event.changedTouches[0].target).is("select")) {
// NEW: Now on iPad2 the touchstart-Event on input fields is ignored and everything works fine
// change my by Roland Caspers, Scheer Management
if ($(event.changedTouches[0].target).is("select") || $(event.changedTouches[0].target).is("input")) {
return;
}
iPadTouchStart(event); /*We need to trigger two events here to support one touch drag and drop*/
event.preventDefault();
return false;
break;
</script>
However this code seems to be outdated and relevant to IOS5. I know of a workaround, which is to put the page with the input into an iFrame, in that case you can just use <input type="text">, however I'd prefer to stay away from iFrames as they tend to move the content around depending on where the input box is. Any thoughts as to other possible solutions or workarounds? Tyvm :)
I am also Facing the same issue on iOS6 for , the same is working perfectly on the <iframe> tag. But it omits the images & style and etc.
Review the code "http://www.linkedin.com/groups/How-Show-iPads-Keyboard-when-3877009.S.84287009", I feel some thing has to modify on below condition:
($(event.changedTouches[0].target).is("select") || $(event.changedTouches[0].target).is("input"))
I'd be great if anyone provide the earlier response.
Thanks
I struggled with this same problem in iBooks on iOS 7. The tricky part was, that iBooks probably makes all text input fields disabled by default. We are using prototype.js, so here is my solution written for prototype:
$('my-input-field-id').observe('touchstart', function(event) {
var element = event.element();
if (element.disabled)
element.disabled = false;
element.focus();
event.stop();
});
So just listen for the 'touchstart' event on the input field and enable and focus the field when touched. It works for ordinary text fields (<input type="text">). Simple :-).

Multiple key presses in JavaScript only working in IE

I have the following code:
function handle_paste_keydown(key)
{
if(key.keyCode == 86 && key.ctrlKey) // Ctrl + V
{
alert("Test...");
}
}
This works in IE, but none of the other browsers. My reason for doing this is that I have finished creating a rich-text editor, but I need to handle the onpaste event carefully because formatted text is able to make it in to my editor, which could pose a minor risk to security, but also butchers my layout if malicious <span>s and <div>s make it in.
My current method is to give focus to an off-screen textarea, which means all code will be pasted in to that (which removes formatting); then I immediately grab the textarea.value and insert it at the current caret position in my contentEditable <div>.
So anyway, how do I get the Ctrl+V to work in all browsers and why doesn't it work in its current state?
Thank you.
If it works in IE but nowhere else you did something wrong.
Use the keypress event rather than keydown.
http://jsfiddle.net/Lxvgr/1/
document.getElementById('foo').onkeypress = function(e) {
if(e.charCode == 118 && e.ctrlKey) alert('pasted');
};
#Eric Sites: "use jQuery" isn't the answer to every javascript question. including an entire external framework to solve a simple 4byte issue like this is ridiculous.

Categories