I have a input text field which is filled with the url of an image using a jQuery function.
How do I use the "onChange" event of the input to run the jQuery function?
If you update field by JavaScript, than after changing value just call on it change()
$('#myId').val('new_url').change();
Try this -
$('#myId').trigger('change');
Put it in any function where you are changing the url in the textbox.
try this :
$("#myId").trigger('event_name')
where event_name is the event you've bound your checker function, such as keyUp or change
I can't imagine the problem lies with .change() perhaps somewhere else in your code, I have just tested and the event will get fired if I copy and paste, or if I type some new text (with both normal and onscreen keyboard).
The only time it didn't seem to trigger was when I dragged some text clipping from the desktop to the input box but this was to do with it being highlighted and sure enough when the input box lost focus the event triggered (I can't think of any other use cases)
You can do something like below using the blur() or focusout() event which essentially I believe is the change event
function foo(e) {
alert(e.type + ' triggered');
}
$('input').blur(function(e) {
$t = $(this);
if ($t.data('oVal') != $t.val()) {
$t.data('oVal', $t.val());
foo(e);
}
})
Related
I am trying to make a currency converter. When I type in a number in the input box and then press one off the buttons nothing happens. Does anyone know why?
When checking if a button is clicked in Javascript, it uses a function callback to do so. So, where you have:
if (KnappBL.onclick) {...}
Javascript is looking for:
KnappBL.onclick = function() {...}
Then, inside of the function callback, you can execute your code to show that the currency has changed.
EDIT: You can find more information about the onClick callback on Mozilla's website here.
The thing that stands out the most at a glance would be the absence of a function in your javascript. Try adding something along the lines of the code below (fyi I have not tested this so you may need to tweak it to fit your application). :) hope this leads you in the right direction.
function convert(amount, convertfrom, convertTo) {
if ***********************
else if ************************
else if ************************
}
Normally, forms and pop Ups don't have the focus set when they are just displayed. The obvious solution was to set the focus to the first input in the creation complete event of the component, so the keyboard short Cuts like tab and space start working.
The problem is that, creation complete is not the panacea, sometimes the element is not focus-able at that point, and i am not sure why that happens.
The render event would ensure the focus, but it dispatches too much for a very simple purpose.
In which point a component is always ready to be focus-able?
Edit: The component giving me trouble to get start up focus, is a TitleWindow, which can be poped in 2 ways, a Mouse click event and a keyboard event.
When the tite window is displayed by a click, the first input gets focus in the creation complete event, but when displayed by a keyboard event, it doesnt...
By now i got it working with the following code:
private function titlewindow_creationCompleteHandler(e:FlexEvent):void{
callLater( setTextInputFocus);
}
private function setTextInputFocus():void{
txtPregunta.setFocus();
}
But doubt the way is shown has anything to do with this... because, some other TitleWindow are displayed this way too and they're fine.
So what could it be?
The render event would ensure the focus, but it dispatches too much for a very simple purpose.
If this is true then why not try this:
private function titlewindow_creationCompleteHandler(e:FlexEvent):void{
var callback : Function = function(re : Event) : void {
titlewindow.removeEventHandler(RenderEvent.orsomething, callback);
setTextInputFocus();
};
titlewindow.addEventHandler(RenderEvent.orsomething, callback);
}
Might be kind of a hack since it should be focusable on creationComplete but it would probably work.
I have a radiobuttongroup where one button is checked upon pageload, is it possible to get some kind of onClick event to fire from that radiobutton upon pageload if it's checked?
I dont whant to use some kind onLoad JavaScript to check it.
$('.radioButton:checked').live('click', function(){
// do something
});
If I understood what you need, you could try something like this (jQuery):
if($('.radioButton').is(':checked')) { $('.whatever_must_be_clicked).click(); }
for the first selector, you can also use the :radio selector $(':radio') or $('input:radio')
There are many ways by which we can attach an event on an HTML element.
The first way is: HTML attribute
<div id="foo" onclick="print2()> My event is attached as HTML attribute</div>
The second way is using some library (say jQuery)
<div id="bar"> My event is attached using jQuery </div>
<script>
$("#bar").click(function() {
alert("Hi this is Bar");
}
</script>
I earlier thought that jQuery might be internally converting the event to corresponding HTML attribute but this does not happen. Check this http://jsfiddle.net/blunderboy/wp4RU/3/
I am logging all the attributes of foo and bar and see bar does not have onclick attribute.
Please explain.
There is nothing called HTML Event! The two types of events you have described are, inline events and unobtrusive events, and both are javascript events.
Inline Events
When you declare javascript code on the elements itself, then it becomes an inline event. You have a few common events (as attributes to HTML Elements) like onclick, onkeydown, onkeypress, onkeyup, and all of them start with on. One such example is:
Click Me!
Unobtrusive Events
We need to assign something to be performed when the event is triggered. The = symbol is always used in JavaScript to assign the value on the right to the method or property on the left.
The window is not the only object we can attach events to. We can attach events to any object within the web page provided that we have a way of uniquely identifying that object. One way of identifying an object is by giving it an ID and referencing it by document.getElementById("id_of_the_element").
Lets take the same example.
Click Me!
Instead of the onclick attribute, I have an ID in the same place, which uniquely identifies the HTML element <a>. Now I can get the ID inside javascript this way:
document.getElementById('clickme');
For this, I can attach an event handler, which doesn't differ much from the way we use the attributes. It just doesn't have the on in the front. In our previous example, we used onclick, but now we are just going to use click.
document.getElementById('clickme').click = functionName;
Here, the functionName refers to any javascript's function name, or an anonymous function. So, for the alert, if we create a function named alertme(), we can define this way:
function alertme()
{
alert('You clicked me!');
}
Now to attach the function to the element can be done this way:
document.getElementById('clickme').click = alertme;
Still feeling lazy, you can do it using the anonymous function way, which takes no name:
document.getElementById('clickme').click = function () {
alert('You clicked me!');
}
Hope you understood. :) Let me know for further clarification.
I am trying to create a webform in HTML, and if needed javascript. In this webform one should be able to enter source code, so to do that comfortably I would like one to be able to enter tabs.
Is there a way to achieve this?
Thanks
You might be able to capture the onKeyDown event. If the keycode is equal to the tab key, then replace the tab with 3 spaces or something like that.
UPDATE:
I tested this in firefox 3. Allows you to type a tab without loosing focus. Just be careful b/c this code will just append a tab character to the end of the text box. Thus, if the user types a tab in the middle of text, tab will still appear at the end.
<html>
<head>
<script>
function kH(e)
{
//capture key events
var pK = document.all? window.event.keyCode:e.which;
//if target is textbox and key is tab
if(e.target.type=='text' && pK==0)
{
//append tab to end of target value
e.target.value = e.target.value + "\t";
//Cancel key event
return false;
}
}
document.onkeypress = kH;
if (document.layers) document.captureEvents(Event.KEYPRESS);
</script>
</head>
<form>
<input type='text' id='txtTest' name='txtTest'></input>
</form>
</html>
There isn't a good way...that's why stackoverflow makes you do 4 spaces and uses a special library to interpret 4-space indented stuff as code. I suppose if you really wanted to use tabs you could do an onBlur event handler which just gave focus back to the window, and an onKeyDown event handler that inserted 4 spaces whenever the TAB key was pressed.
You could go for an "indent" button on the toolbar. When it is pressed, it either inserts a tab if nothing is selected, or indents the selection.