I use Anki, a software of flashcards to learn a new language.
What my card looks like :
I want to use a key on my (physical) keyboard to show/hide additional infos on my card to review my cards faster on iPad.
The problem is that the document element is not focused at first (it is the answer buttons that are), so the keyup event in JS/JQuery doesn't work. I need to touch the iPad screen first to then use my keyboard if I want it to work, which kind of defeats the whole point.
My code :
$(document).ready(function() {
$(document).on('keyup', function(e) {
var key = e.key;
if (key == "p") {
// My Code
}
});
});
I tried $(document).click(), $(document).trigger("click") and $(document).focus() without success. Other people (on Reddit) have had this problem but resolved it with add-ons for Anki − As I would like to make it work on iPad (so no add-on), this is not an option forme sadly.
Any help would be greatly appreciated.
Cheers!
I'm systematically building jQuery functions such that the css classes of various inputs in a web form have dependencies on other inputs (i.e. when a given input has a given value, the "hide" class is removed from the appropriate subsequent input etc.)
A specific (working) example of the jQuery I am using is:
$(document).ready(function(){
$("input[name$='q_4']").change(function(){
if(this.value == 'Yes') {
$('#qu_5').removeClass('hide');
} else {
$('#qu_5').addClass('hide');
}
});
});
In this example, the dependent question div (#qu_5) depends on the value entered via radio button for (name=q_4) to be "Yes".
Because I am building these functions dynamically (users can edit properties of questions such that they have these kinds of display dependencies) via a database, I end up with multiple chunks of this code on a page with several interdependent inputs. Each chunk of code has the name of the master question, the id of the slave question and the value that the slave relies on to be revealed. This also works as intended.
Sometimes however, one input should reveal multiple other questions so I end up with code something like:
$(document).ready(function(){
$("input[name$='q_87']").change(function(){
if(this.value == 'yes') {
$('#qu_88').removeClass('hide');
} else {
$('#qu_88').addClass('hide');
}
});
$("input[name$='q_87']").change(function(){
if(this.value == 'yes') {
$('#qu_89').removeClass('hide');
} else {
$('#qu_89').addClass('hide');
}
});
});
This does not work. (and indeed stops all the reveal / hide functions working on that page)
I presume it is because jQuery/javascript isn't happy with the same event input[name$='q_87']").change firing two different functions? This is the only thing I can think of.
Does anyone have any advice as to how I could achieve what I want in a way that works? Thanks! :)
If you need a var and an array you can write it like this
var questions = {
"q_87":["qu_88","qu_89"],
"q_96":["qu_95","qu_99"]
}
$.each(questions,function(q,arr) {
$("input[name$='"+q+"']").change(function(){
$("'#"+arr.join(",#")+"'").toggleClass('hide',this.value == 'yes');
});
});
I have an accordion set up to handle registration. I am wanting to validate the data entered on each panel when the user clicks on a different panel tab. I have a continue button on each panel, and am able to validate to my heart's content when the user uses that to go to the next panel.
My problem is that they can also click independently on the accordion tabs (and I want them to be able to skip around for editing purposes), but I would like to validate on those events too.
I've done a bunch of searching, but have not found a satisfactory answer. I am fairly new to Javascript and super-brand-new to jQuery, so please, if you have code snippets for me, be thorough in explaining them.
This should be a straightforward problem (similar to on-click, etc.). I'm quite surprised and frustrated that I haven't found an answer yet.
Edit:
Eric, I couldn't get this to work. Here is my version. I put it in the head section. I have some test code in there that has worked reliably for me in the past (changing the label on one of the tabs). I'm assuming this code has worked for you? Anyway, thanks for your help and I hope we've understood each other sufficiently.
// add capability to detect when accordion tab has been clicked
RegFormAccordion.addEventListener('click', function(e){
var btnElement;
(function findAccordionButton(el){
//e.target is the original element actually clicked on
//the event bubbles up to ancestor/parent nodes which is why you can listen at
//the container
if(!btnElement){ btnElement = e.target; }
else { btnElement = el; }
if(e.target.className !== 'accordionBtn')
{
findAccordionButton(btnElement.parentNode);
}
else
{
var curr_panel_index = RegFormAccordion.getCurrentPanelIndex();
document.getElementById("verify-reg-panel-label").innerHTML = "Index = " + curr_panel_index; // test code to see if it's even getting here
if (curr_panel_index == 1) // contact section
{
ValidateContact();
}
else if (curr_panel_index == 2) // payment section
{
ValidatePayment();
}
UpdateVerifyPanel(); // update contents of verification panel
}
})()
} );
Event delegation.
someAccordianContainer.addEventListener('click', function(e){
var btnElement;
(function findAccordionButton(el){
//e.target is the original element actually clicked on
//the event bubbles up to ancestor/parent nodes which is why you can listen at
//the container
if(!btnElement){ btnElement = e.target; }
else { btnElement = el; }
if(e.target.className !== 'accordionBtn'){
findAccordionButton(btnElement.parentNode);
}
else { doSomething(btnElement); }
})()
} );
You will have to normalize for IE<=8 however if you're supporting older browsers, since it uses a proprietary attachEvent method. Hit quirksmode.org for the details or just use something like jQuery or MooTools.
OK. I found the function that SpryAccordion.js uses to open a new panel and added my own code. Simple and elegant. It's not what I would normally do (usually I leave "libraries" alone). But if you make it editable without giving me another way to take needed control, then the hack is gonna happen.
If I need to use another accordion somewhere else on my website, I will have to double check that I have the correct accordion before invoking the hack. A trade-off I'm willing to make. It works perfectly now. Here is the code:
Spry.Widget.Accordion.prototype.openPanel = function(elementOrIndex)
{
var panelA = this.currentPanel;
var panelB;
if (typeof elementOrIndex == "number")
panelB = this.getPanels()[elementOrIndex];
else
panelB = this.getElement(elementOrIndex);
if (!panelB || panelA == panelB)
return null;
// Start Becca's code
var panelIndex = this.getPanelIndex(panelA);
if (panelIndex == 1) // contact info panel
{
if (ValidateContact())
UpdateVerifyPanel();
else
return null;
}
else if (panelIndex == 2) // payment info panel
{
if (ValidatePayment())
UpdateVerifyPanel();
else
return null;
}
// End Becca's code
var contentA = panelA ? this.getPanelContent(panelA) : null;
var contentB = this.getPanelContent(panelB);
...
...
...
};
Yes, all I wanted was the same control over the panel tabs as I have over my own user-defined buttons, to make sure I could both validate before moving on, and to update my verification screen after any edit the user makes, not just the ones where they happen to hit my continue button. I'm a happy camper. So glad I took a couple of days off.
I hope this helps someone get more control over their own accordions. So glad I don't have to do a crash-course on jQuery when all I want right now is to get my blasted website up.
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 :-).
How Do I disable the copy paste feature in my webpage. To be precise, I don't want my users to copy any information from my website and use them for personal purposes. The previous question on the same topic doesn't give enough explanation. The onselect and ondrag aren't working. Please help.
I don't want my users to copy any
information from my website and use
them for personal purposes
There is no way to do this. If someone really wants your information, they can get it.
You might be able to give them a litte bit of trouble with disabling certain functions using javascript or whatever...but you'll only give the people who don't know much about technology that trouble. And usually those people aren't even trying to copy your data. The one's who are, will figure out a way.
If you publish information online, you should clearly indicate your copyright claim on the page (or indicate the type of license you issue the content under). Please find and read the copyright law of your territory to understand what this does and doesn't allow - for example, in the UK there are provisions for making personal copies of copyrighted material and for using parts of copyrighted work for critical review or parody.
You can't stop people from copying the content on your page. You can make it more difficult for them to do - but this will have a negative impact on your page. Techniques such as preventing the left-click of the mouse, intercepting keyboard events or converting your entire article into images just make your website less usable.
If you have textual information on your website, I can re-type it even if you've stopped every other method of me copying the image. If you have an image and you've managed to lock out everything else, I can still do a screen-grab (not to mention the fact that my browser caches all the images in a temporary folder on my machine).
Your content-paranoia affects many people who set up a website - but the idea behind the Internet is that it is used for sharing information.
Just add the following code to the HEAD tag of your web page:
<script type="text/JavaScript">
//courtesy of BoogieJack.com
function killCopy(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=killCopy
document.onclick=reEnable
}
</script>
By default, Chrome and Firefox block disabling the right click menu. You have to manually edit an entry in about:config in Firefox to prevent it being blocked, which is not something you can force your visitors to do.
Regarding IE, you can modify your BODY tag like so:
<body onContextMenu="return false">
Which will prevent the right click context menu.
Other than that, the next best step is to create an image of your text, place it in a .swf (flash) document, and point the page to load the .swf as the page. This will cause all browsers to display the flash context menu on right click, and will prevent simple copy/paste efforts.
I do agree with previous replies, regardless of method used, any user can simply use their Print Screen key, paste the image in Paint (or other program), save it, and use OCR to grab your text.
You need to rethink your strategy if you're resorting to these measures on the front end. What you are trying to do is inherently wrong.
As a visitor to your web page, pulling something like this is just going to annoy me - I will eventually figure out what you've done and get around it. That said, I've recently found this particular method can be quite effective if you're aiming to restrict impatient or non-technical users. Proceed with caution...
<div class="text">
<p>Hello, world! Sadly, I won't work.</p>
<img alt="I can't be dragged or saved either :(" src="tree.png">
<div class="preventSelect"></div>
</div>
...and the CSS:
.text {
position: relative;
width: auto; /* can be fixed as well (ie 400px) */
width: auto; /* can be fixed as well (ie 400px) */
z-index: 0;
}
.preventSelect {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}
The obvious drawback for this method is that the user cannot interact with anything inside the div we're preventSelecting. That includes links, buttons, images etc.
Please don't use this unless you absolutely have to. Frankly, it's a pain in the ass for everyone.
To be honest, if you don't want people to use any information on your site, then you can't put it up there. If you stop them from being able to copy and paste the information, they'll still be able to take a screenshot of it, type it out and save the data that way. I know it's not the answer you're looking for, but that's just something to think about.
(I did this because i can't comment yet).
Forget it. It is not possible to block these functions in a browser. The "best" you can do is to present your data in an image or Flash movie - inconceivable, slow, impractical, horrible to implement and also circumventable using OCR software.
If all else fails, users will simply make screen shots or key in the data manually.
If you present data to your users, you will have to live with the possibility that they can copy it. End of story.
Use legal threats to prevent your contents, not technical means.
You can't ever disable it.. users can view the source of your page so the text is always available. If you put click handlers to disable right-click, they can turn javascript off..
The best you can try to do is make it inconvenient for people to deter them, but never can you prevent them.
It is impossible to secure a website against copying. There are some technices to make it more difficult, but as soon as the user has the information on his screen its already too late. He could for example take a picture with a camera if the screenshot function could be disabled somehow.
Disabling of javascript functionality (f.e. shortcuts) is not working in all browsers and the user may disable javascript.
Using programs like curl all the information on the webpage can be grabbed.
Best thing you could do is to put all the information you present into an image.
What the developers of lyrics.com have done is attach events to document.body.oncontextmenu, document.onselectstart, and document.body.onkeydown to disable the actions browsers would take.
It can be done as simply as
<body oncontextmenu="return false" onselectstart="return false"
onkeydown="if ((arguments[0] || window.event).ctrlKey) return false">
You'd need all three; oncontextmenu basically governs right clicks, onselectstart covers drag-selecting with the mouse, and onkeydown Ctrl-key events (like someone who'd hit Ctrl+A, Ctrl+C to copy the whole page).
But I highly recommend that you NOT DO THIS. It kills usability and frustrates even legitimate users (for example people that have certain key mappings set up, or the ones who use "back" and "reload" from the context menu), and the ones you'd have to worry about would not be hindered even the slightest bit. And frankly, your content is not as special as you think it is, or you wouldn't be serving it up to any loser with a web browser. Information that valuable is not put online.
As has been noted before, all that return false stuff is not enforceable. And because i found the page particularly infuriating, that prompted me to pop up a console and dissect what they did, and detach event handlers so i could copy whatever i like and they don't even get their precious click-tracking data. Really, though, all anyone has to do is disable JavaScript.
The only way to keep people from copying text from the internet, is to keep it off the internet. Any other way is doomed to fail, as you yourself are handing them a copy as part of the very act of serving it to them.
You can stop from copy paste using below code
<body ondragstart="return false" onselectstart="return false">
<script type="text/javascript">
function md(e)
{
try { if (event.button==2||event.button==3) return false; }
catch (e) { if (e.which == 3) return false; }
}
document.oncontextmenu = function() { return false; }
document.ondragstart = function() { return false; }
document.onmousedown = md;
</script>
<br />
Try adding this css:
#content {
pointer-events: none;
}
This will deactivate mouse actions, thus copy-paste too.
Disable cut, copy, and paste options.
<script language="text/javascript">
// disable portal cut copy and paste options.
$('body').bind('cut copy paste', function (e) {
e.preventDefault();
});
</script>
But I prefer to enable this option on localhost.
<script language="text/javascript">
// disable portal cut copy and paste options.
$('body').bind('cut copy paste', function (e) {
// enable only localhost
if (location.hostname === "localhost" || location.hostname === "127.0.0.1")
{
return;
}
e.preventDefault();
});
</script>
please try this one its working for me...
$('body').bind('cut copy paste',function(e) {
e.preventDefault(); return false;
});
With Javascript you can disable copy/cut/drag for average users who don't know how to use inspect element feature, for that just add this simple javascript code:
document.addEventListener("copy", disable);
document.addEventListener("cut", disable);
document.addEventListener("drag", disable);
document.addEventListener("dragstart", disable);
document.addEventListener("dragover", disable);
document.addEventListener("dragend", disable);
document.addEventListener("drop", disable);
function disable(e) {
if (e) e.preventDefault();
return false;
}
If the user however tries to access the source code then you can't stop him, the best is to wrap each sentence in its own span to make it difficult for him to copy.
<script type="text/JavaScript">
function killCopy(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=killCopy
document.onclick=reEnable
}
</script>
I would suggest disabling right click.
<script language="text/javascript">
var message = "Not allowed.";
function rtclickcheck(keyp){
if (navigator.appName == "Netscape" && keyp.which == 3){
alert(message); return false;
}
if (navigator.appVersion.indexOf("MSIE") != -1 && event.button == 2) {
alert(message);
return false;
}
}
document.onmousedown = rtclickcheck;
</script>