making onchange work like onchange and not like onleave? - javascript

I have this piece of code:
<input type="text" name="desc" id="desc" onchange="OnDescChange();" />
but it does not act as i want. It runs the function when i leave the box, i would like to do it everytime the content of that inputfield changes, how do i do that?
(im trying to make a suggestionbox to the users input).
Ive also tried jquerys .change but it gives med the same result.

Try onKeyUp or onKeyPress.

Try to use the onkeypress event:
<input type="text" name="desc" id="desc" onkeypress="OnDescChange();" />

I would recomment using the onkeyup event handler
<input type="text" name="desc" id="desc" onkeyup="OnDescChange();" />
onkeydown or onkeypress could be used too, but the only problem to be aware of with that is that these event fires before the text in the input field has been updated.

You can use 'onKeyUp' or 'onKeyDown' events instead of 'onchange'
If you are using jquery you can use something like the following
$("input").keyup(function(){
$("input").css("background-color","#D6D6FF");
});
Hope this helps.

Related

Disable direct value editing in input type="number"

i have using<input type="number">. in that i don't want user can enter manually numbers in to input. user only increase and decrees numbers by step then is it possible.
You can do it by cancelling the keydown event. Either inline (<input type="number" onkeydown="return false">), or within an event handler.
Use jQuery
$('input[type="number"]').keydown(function (e) {
e.preventDefault();
});
Use readonly attribute to input.
<input type="number" readonly>
Demo

event for selecting item with Tab key

I have a simple form in which the values of the input tags change when I click on them using onclick="foo();". The problem is that when Im testingi it I naturally press tab to get to the next input box and this doesn't trigger the onClick function. I've tried onselect and a couple of others to no avail. Any help would be highly appreciated.
Example below:
<input name="user" type="text" value="username" style="color: grey;" onEnter="javascript:clear_input(this)"></input><br>
<input name="pass"type="text" value="password" style="color: grey;" onClick="javascript:clear_input(this); hide_input(this);"></input><br>
You need the onfocus event, this will handle both a click into and a tab into the element.
<input onfocus="clear_input(this)" />
Also, you don't need the javascript: label in there. The browser will just ignore it anyway:
<input name="pass"type="text" value="password" style="color: grey;" onfocus="clear_input(this); hide_input(this);"></input>
And finally, you should read up on Unobtrusive Javascript, what it is and how it will save headaches in the future :)
I guess you can use onfocus event. It works even for click or tab.
<input type="text" onfocus="myFunction()">
I guess it would be helpful.

Auto-highlight an input field on focus

I was wondering if there was a way for text inside a input box (pre loaded using value="") to highlight when the user clicks on it?
input type='text' name='url' id='url' value='http://www.a-link.com/' />
EDIT
I need the text to he highlighted so the user can copy it.
<input type="text" name="textbox" value="Test" onclick="this.select()" />
You could attach javascript to the click event to select the text like so:
$(document).ready( function() {
$('#id').click( function( event_details ) {
$(this).select();
});
});
There is a potential issue where the user could be trying to click at a later point in the text to correct a typing mistake and end up selecting the whole thing. A better way would be to trigger this when the input gets focus from the user. you'd replace .click with .focus in the example above.
jQuery event documentation:
http://api.jquery.com/category/events/
Add the following onclick attribute to make the entire <input> automatically highlight when the user clicks on it:
<input type="text" value="Test1" onclick="this.select()" />
Alternatively, if you want the user to be able to change the selection after the initial click, change the onclick attribute to an onfocus attribute. This will also highlight the entire <input> when the user clicks on it, but it allows them to change the highlighted part manually afterwards:
<input type="text" value="Test2" onfocus="this.select()" />
Here is an example of both inputs in action.
You want to use focus property. Like this: http://jsfiddle.net/sCuNs/
html
<p><input type="text" size="40"></p>
css
input:focus, textarea:focus{
background-color: green;
}
Do you mean to select the text?
Use onclick event to fire the code:
document.getElementById("target-input-id").select();
$('#foo').on('mouseup', function(e){
e.preventDefault();
$(this).select();
});
$('#foo').on('mouseup', function(e){
e.preventDefault();
$(this).select();
});
This should do it:
<input type='text' name='url' id='url' onclick="this.select()" value='http://www.a-link.com/' />
<input id="inputField" type="text" size="40" value="text to be highlighted"></p>
document.getElementById('inputField').focus();
The default behavior for focus selects the text in the input field. I was looking for a solution not to do that when I found this.

JS/HTML onChange

with similar question. :)
<input type="text" name="npcolor" id="npcolor" size="9" maxlength="9" value="<?=$userinfo->npcolor?>" onchange="change_npcolor()" readonly />
<input type="text" ID="np_sample" size="2" value="" readonly style="background-color:<?=$userinfo->npcolor?>" />
<input type="button" onclick="pickerPopup202('npcolor','np_sample');" value="Change" />
function pickerPopup202 is changing npcolor, but when npcolor is changed it don't call change_npcolor(). When I put extra button that call change_npcolor it works. I tried also:
document.getElementById("npcolor").onchange='change_npcolor()';
without success.
P.S. JS that changes npcolor (pickerPopup202) isnt mine, and ALL code is at one line, so i cant really mod it.
When you change the value dynamically, the onchange event doen't fire. You need to call the change_npcolor() method yourself. You could also call document.getElementById("npcolor").onchange(). (This is less efficient, but more flexible when the event handler may change eventually.)
You cannot change the event listener by just adding a string with javascript code to the onchange property. You can do it like this, however:
document.getElementById("npcolor").onchange = function(){
change_npcolor();
}
document.getElementById("npcolor").onchange='change_npcolor()';
here you have change_color() as a string but this is not correct syntax.
Instead of that you can use
document.getElementById("npcolor").onchange=change_ncolor;
Because the change_ncolor works as an object.

jQuery selector - input field

I'd like to enable the textbox when it is clicked. However, when I click the textbox, nothing happens. I believe it is a problem with the jQuery selector. Why isn't this working?
<script>
$(document).ready(function() {
$(':input').click(function() {
$(this).removeAttr('disabled');
});
});
</script>
<input type="text" value="123" disabled="disabled" />
Note: I tried both $('input') and $(':input') to select the textfield. Neither worked.
A disabled input isn't going to fire events. Try changing from disabled to readonly.
It has nothing to do with the selector you're using, but rather because, since the input element is disabled, the events for the input will not fire - see: http://www.jsfiddle.net/DvZDh/
<input type="text" value="123" disabled="disabled" />
<input type="text" value="123" />
The code works on the second input element, but not the first. A simple solution would probably be to use CSS to simulate the disabled state instead.

Categories

Resources