How to set a "First Word Hotkey" to button in Javascript? - javascript

Situation: I have a HTML Form, inside it, i have some <input>'s with some info, and a <input type=submit> that is the Send button, who sends the form content to the url set on action parameter.
Problem: Missing knowledge(i don't know how to do).
Explanation of what i want: I want a hotkey like, for example, hit now on your browser or another common software like Notepad the Alt key of your keyboard. You will see a menu coming down on the top of screen, and some Word that are underlined like this one:
Well, you see the F with a underline, and you know that if you hit the key F the File menu will be opened.
Details: The hotkey that i want, is a little different from the example above, but have the same concept. Because i want to allow the user to Press: Alt + F instead of only F to automatically click on the Button that have F set as hotkey to itself.
This way, i can place one <input id=F type=button> i used attribute ID, for example, and if i press Alt + F the button is automatically clicked.
In theory, maybe its easy, but i really do not know how to do this on Javascript.
Does someone know how to do it?

What you want is something like
<input type="submit" accesskey="F"/>
Now, when the users hits Alt + F (or Alt + Shift + F on Firefox) it will be as though he had clicked on the submit button.
EDIT: to use Alt + F on firefox too see this topic: http://forums.mozillazine.org/viewtopic.php?t=446830
You can change it back to how it was using about:config, change:
ui.key.chromeAccess to 5
ui.key.contentAccess to 4
In Opera, press Shift + Esc. That brings up the access key list for the current page. Then you can press any number from the access key list to follow the respective link. Users can change this keyboard shortcut under Tools > Preferences > Mouse and keyboard.

If you were to use jQuery.hotkeys then you would bind each key or keystroke to a function and deal with it that way.
If you gave your buttons an ID of the key you want them to respond to, you could do something like this:
$(document).ready(function () {
var $doc, altKeys, modified;
$doc = $(document);
modified = function (ev) {
var selector;
selector = '#' + ev.data.replace(/^alt\+/, '');
$('button').css({background: 'transparent'});
$(selector).css({background: 'red'});
};
$('button').each(function () {
var key;
k = $(this).attr('id');
$doc.bind('keydown', 'alt+' + k, modified);
});
});
See this fiddle for a working example

Related

JavaScript: Add pixel position to href of each link

is it possible to add the coordinates of a href-link into the target-query?
I mean something like this:
Link 123
This should add the coordinates of the link (id) on the page into the query via document.write() or something.
PS: Should work without JQuery and with IE11 :)
Thanks!
Instead of using a bare href attach an event using javascript, grab the X & Y you want (maybe screen or client as demonstrated below) and redirect the location.href to your chosen page building up the url as needed (commented out below so you can see output).
document.querySelector('#link').addEventListener("click",evt => {
console.log("screen",evt.screenX,evt.screenY);
console.log("client",evt.clientX,evt.clientY);
//location.href = "somepage.php?x=" + evt.screenX + "&y=" + evt.screenY
});
Link
By setting the value of location.href in the event handler the behaviour for the user will be the same as having clicked a link with an href attribute.

How to click a Button By matching a text.?

I am very New to JavaScript. Now i am trying to make a Google Chrome Extension which a click a Button on a specific web address. But the Site opens only for 30 second.. So i just saw the button color is GREEN and the button text is- " Move To "
so how can i trigger that button ? I am Trying for this. But its not Working.
var b = $('button[class*="Move To"]')[1]
$(b).click();
You can use :contains.
var b = $( "button:contains('Move To')" )[1]
b.trigger('click');
https://api.jquery.com/contains-selector/
Or if text is exactly Move To you can use this:
var b;
if($('button').text() == 'Target'){
$('button').trigger('click');
}
fire click event on a button containing particular text
js
$("button:contains('Move To')").trigger( "click" );
HTML
<button id="btn">Move To</button>

Button click to turn on spell check

I have a textarea that has spellcheck = "false". I want to have a button that when clicked turns on spellcheck and checks the spelling of what is already typed.
At present, if you enter anything else in the text box after the button click, it checks spelling properly. However, I would like it to spell check what's already there without needing to enter anything additional in textarea.
<textarea id="ta" spellcheck="false"></textarea>
<div>
<input type="button" id="spell_btn" value="spell check">
</div>
$(document).on('click', '#spell_btn', null, function () {
$("#ta").attr("spellcheck", "true");
});//close .click
https://jsfiddle.net/906dqtn6/5/
I tried to reset the value using $('#ta').val() but
didn't have any effect.
var x = $("#ta").val();
var y = " ";
$("#ta").val(y);
$("#ta").val(x);
Thanks in advance.
Your HTML attribute should be spellcheck instead of spellchecker (w3schools) and the jQuery should be:
$("#spell_btn").on('click', function () {
$("#ta").attr("spellcheck", "true");
});
An idea is that maybe you could trigger a keypress or keydown event on button click on your element.because spellcheck only seems to work as you type (or while the element is in focus), when clicking the button spellcheck may become inactive. To trigger these events:
$("button").on("click",function() {
$('#ta').keydown();
$('#ta').keypress();
$('#ta').keyup();
$('#ta').blur();
});
See here for reference
Here is a free, open source Javascript library for spell checking that I authored:
https://github.com/LPology/Javascript-PHP-Spell-Checker
There's a link to a live demo at the top. It's designed to have the feel of a spell checker in a desktop word processor. I wrote it after being dissatisified with these same options.
To use, just include the JS and CSS files into your page, and then add this:
var checker = new sc.SpellChecker(
button: 'spellcheck_button', // opens the spell checker when clicked
textInput: 'text_box', // HTML field containing the text to spell check
action: '/spellcheck.php' // URL of the server side script
);

Using keyboard keys as navigation

I'm working on a blog theme & I'd like to have keyboard navigation. I know it has something to do with the id of the keyboard keys, but I've looked for I think 3 hours now and still have not found an easy solution. Here are the keys that I'd like to press & what I'd like them to do.
J - Scroll down to next post
K - Scroll up to previous post
R - Opens a new tab with THAT post's reblog URL
P - Opens a new tab with THAT post's permalink URL
If anyone could help me with this it would be extremely helpful. Also, I know you can do something by setting the links up in the URL like <article data-reblog-url="http://reblogurl" data-permalink-url="{Permalink}"> but I have no clue how to make the browser open a new tab when the R & P keys are pressed with that data as the URL. Also, the J & K, I'd like the browser to smooth scroll to the top of the post including the post's margin-top.
If anyone could help me with the whole code I would appreciate it a TON. I know it's a lot and I'm probably going to get thumbs down for this, but like I said I've been trying for more than an hour and I just need an expert's help.
More than an hour isn't a lot. But here's something to get you started:
You can reliably check which key was pressed by checking the which on the event object. I've made a demo so you can see how to check which key was pressed.
DEMO: http://jsfiddle.net/RXPhP/
Gotcha: The event is only fired on the element that has focus, so you're probably better tying it to body or document for navigation.
Something like this would give you a nice start. If you cannot use any libraries, then you do
<script>
var keyMap = [];
keyMap["j"] = 106;
keyMap["k"] = 107;
keyMap["r"] = 114;
keyMap["p"] = 112;
window.onkeypress = function (event) {
var asciiVal = (event.which) ? event.which : event.keyCode;
//Write a switch here to individually handle input.
}
http://www.w3schools.com/jsref/event_onkeypress.asp for the keypress events. It allows you to execute js when a key is pressed. The js would receive an event event and that would tell you what key was pressed. Depending on the key press, you would do something else nothing

Handling text elements of web pages using qml keyboard

I am using the Qt Web Kit 1.0 to open web pages. I have a keyboard available with me, written in qml. I want to use this keyboard to fill in the text into text boxes of the HTML pages.
Say, I opened gmail.com. Now, I want to fill in the user name and password. But when I will click on this text element of the webpage, what event should I handle to bring out my keyboard for user to use it ? And where exactly will I send this text generated from the keyboard, for it to be set into the username field of that page ?
You can change the text field value by evaluating some custom javascript code in the WebView:
webViewId.evaluateJavaScript("document.getElementById('textInputId').value = '" + yourValueString + "'")
Documentation here.
Edit:
For the keyboard activation you can refer to the javaScriptWindowObjects property: you can activate it, for example, in the body onload event, or in the text field onfocus event.
Edit2:
I add a simple example to explain what I'm trying to say:
I assume you have a QML custom Item called Keyboard, and that this Item has a signal onKeyPress called whenever a key is pressed.
Your code should be something like this:
WebView {
id: webViewId
javaScriptWindowObjects: QtObject {
WebView.windowObjectName: "qml"
function showKeyboard {
keyboardId.opacity = 1;
}
}
onLoadFinished: {
evaluateJavaScript("document.getElementById('textInputId').onfocus = window.qml.showKeyboard;")
}
}
Keyboard {
id: keyboardId
opacity: 0
onKeyPress: {
webViewId.evaluateJavaScript("document.getElementById('textInputId').value += '" + keyValue + "'")
}
}

Categories