I have a span with a text in it that suppose to change constantly after I press something in my textbox.
<input type="text" class="response" onkeypress="return ChangeSpan()" id="how_many" name="how_many" placeholder="Enter how many..." />
and my jQuery:
<script type="text/javascript">
function ChangeSpan() {
var text = $("#how_many").val();
$('#changeText').text(text);
}
</script>
it's working perfectly fine , but when I press let's say "dfg" , its only present "df" on the span. and only when I add the next charecter, it adds the "g".
I want it to respond also to the last character, how do I do that ?
You probably want to use keyup.
You use jQuery and add the events inline? That is bad practice. Attach events using on.
$("#how_many").on("keyup", function(){ $('#changeText').text( this.value ); });
Difference between keyup, keydown, and keypress explained on quirksmode.
Yeah I might be a little late but actually using keypress is better than keyup because if you hold a key very long it will show up when you release it if you use keyup.
If you use keypress you'll directly see what you've typed but you've to use it as shown in the code below.
The only problem is that keypress won't recognize if you delete chars. So keypress is better but keyup should be also in use.
$("#how_many")
.keypress(function(e) {
var text = $("#how_many").val() + String.fromCharCode(e.which);
$("#changeText").text(text);
})
.keyup(function(e) {
var text = $("#how_many").val();
$("#changeText").text(text);
});
Look at this example. It's exactly the code before.
And this example. It's the code before without using keypress.
Hold any character key in both examples while the text box is on focus. As you can see the first example reacts better.
Why dont you just use bindings? This should do it:
<input type="text" class="response" id="how_many" name="how_many" placeholder="Enter how many..." />
$(window).load(function(){
$("#how_many").bind('focus blur keyup',function(){
$('#changeText').text($(this).val());
});
})
<input type="text" class="response" onkeyup="return ChangeSpan()" id="how_many" name="how_many" placeholder="Enter how many..." />
Try changing your event to keyup. Here's an example:
http://jsfiddle.net/SHdTL/
Note: I'd recommend using jquery to assign your event listener as well rather than inline, but it's not pertinent to your issue.
Related
The following var is only working in my script when the text is hard coded in the textarea (e.g. London):
script
var thought = $('textarea[name=search]').val(); //...used in object literal
html
<textarea rows="5" name="search" type="text" id="term">London</textarea>
I'd like to be able to type a search term into the textarea and search for it but it's not working?
I've tried all of the answers below with no luck!? I've therefore included the following in the object literal. It pulls the hard coded value from the textarea (like before) but it doesn't pull a value that is typed in the textarea normally? I thought this might be easier to resolve the problem (the feed not working when the search term is typed in)
search: $('textarea[name=search]').val(),
I'm following this tutorial below for a twitter feed with jquery but adding a textarea to search for terms,topics,hashtags etc is proving difficult to figure out.
Twitter Feed with Jquery linky
Do with keyup or change event of textarea
$("textarea[name='search']").keyup(function(e){
var currentText=this.value;
});
You have a couple options, either search using a click event on some button called Search, or use a change / keyup event to grab the new value each time the field is updated, and perform the search that way:
$("#term").keyup(function() {
console.log(this.value); //theres your value!
});
As stated before, if you use it like this, it will be stored in the thought var and you can call it from whatever function you're using.
Since your method calls it one time probably before you edit it.
At least that is what I'm guessing since your code is obviously not complete ;).
var thought = '';
$('textarea[name=search]').keyUp(function(){
thought = $(this).val();
});
Just add jquery and use below code.
<html>
<head>
//import jquery here
<script>
$(document)
.on("click", "#btn", function(event) {
var thought = $('textarea[name=search]').val();
alert(thought);
});
</script>
</head>
<body>
<textarea rows="5" name="search" type="text" id="term"></textarea>
<input type="button" id="btn" value="click me">
</body>
How can I can I alter (change, add, whatever) HTML/text real-time using the input tag? Very similar to the preview interface when asking a question on Stack Overflow minus the code encoding. It just has to be simple.
For example,
<input type="text" name="whatever" />
<div id="example"></div>
Whatever text is entered in the above input tag is added to #example in real-time.
Something involving innerHTML and JavaScript perhaps?
You can do this with jQuery
$('input').keyup(function(){
var a = $(this).val();
$('#example').text(a);
});
Example: http://jsfiddle.net/5TnGT/
There are many other ways to change content than described in the previous answers. Listen for all of them and update realtime. Requires jQuery supporting the newer .on() event handling for this example. Can also use .bind() or .live() with appropriate syntax.
$(document).ready(function() {
$(document).on('keyup propertychange input paste', 'input', function() {
$('#example').text($(this).val());
});
});
The second $(document) can be made more specific depending on the markup of the rest of your page.
See also: http://jsfiddle.net/DccuN/2/
Yes javascript will do this. Have a look at on key up. Then either innerHTML as you say or jQuery makes things a bit easier with .append or .html or .text
(Damn too slow)
Plain JavaScript solution (you won't need any sophisticated lib if you don't get too fancy elsewhere):
<input type="text" onkeypress="document.getElementById('example').innerHTML=this.value;" name="whatever" />
<div id="example"></div>
You can bind to the keyup event. Then set the div contents to that of the input.
http://jsfiddle.net/wYqgc/
var input = document.getElementsByTagName('input')[0];
var div = document.getElementById('example');
input.onkeyup = function() {
div.innerHTML = this.value;
};
You can start with this:
input.onkeyup = function () {
output.innerHTML = this.value;
};
Live demo: http://jsfiddle.net/P4jS9/
Please check the codes..
$(".editable").live("click",function(){
CurrentOBJhtml = $(this).text();
nextHtml = "<input type='text' class='hoverable' value='"+CurrentOBJhtml+"' />";
var c = nextHtml;
alert(c); //here two alert box comes....
$(this).html(c);
});
When i alert c ,it alerting two values in two alert boxes...
first value is <input type='text' value='myname' class='hoverable' />
second one is <input type='text' value='' class='hoverable' /> where the second one doesnt have the value .
When i comment the last line ($(this).html(c);) then it only giving the first result.
What is the problem with me ? i am totally confused.
please help me to solve this issue.
Thank you .
Update :
HTML :
<fieldset id="user_info_module">
<label>username:</label>
<label class="editable" id="user_info_username">
<label>Email:</label>
<label id="user_info_email"> </label>
<label>Default page:</label>
<label id="user_info_defaultpage"></label>
<label>mobile:</label><label id="user_info_mobile"></label>
<label>country:</label><label id="user_info_country"></label>
<label>address:</label><label id="user_info_address"></label>
<label>pincode:</label><label id="user_info_pincode"></label>
<label>landline:</label><label id="user_info_landline"></label>
</fieldset>
http://jsfiddle.net/M3J2p/1/
First thing put your jquery code inside the $(document).ready(function()); handler.
and check this jsfiddle, it is not showing any double alert box to me. when you click a element then this will refer to that particular element not the others.
Update your html code in question to confirm about the exact problem or create a example jsfiddle for your problem.
Edit: Error reasons and solved
Before jQuery 1.7, to stop further handlers from executing after one
bound using .live(), the handler must return false. Calling
.stopPropagation() will not accomplish this.
$("a").live("click", function(event){
event.preventDefault();
});
Check your updated jsfiddle as per your code. you have missed to close the one tag and the above event bubbling problem occurs when you use this. In updated jquery use .on() ..
check .live() documentation at jQuery to konw about this better.
May be you have two elements with the class "editable" or that you calling the code above twice. Do you have it in document.ready? or calling it through function?
I suppose that $(".editable") finds more than one element. If you want to find a specific element, consider using the Id or you can also check whether the target is the correct one in the callback.
$(".editable").live("click",function(event)
{
if (event.target == mytarget)
{
// do something
}
});
hope that title makes sense. I'm a noob at javascript. What I want to do is have a form which will have a couple of inputs like, name and url for example.
When the user enters their name, I'd like the url input to automatically have as a default their name with an underscore between words. So if they type in as their name pedro kinkybottom then automatically set as the default in the url input would be pedro_kinkybottom.
I'm using cakephp if anyone happens to know a particularly cakey way to do this that'd be cool but otherwise any help at all would be most welcome.
Thanks,
Pedro
You'd probably want to do this in JavaScript and not in PHP. Even though you may be more familiar with the latter, the user experience would be better with the former and the overall design simpler (since the page wouldn't need to refresh).
You essentially need to do two things:
Set the value of an input in response to an event on another input.
Replace space characters with underscore characters.
For the second part, take a look at JavaScript's replace function. It's pretty robust and lets you do a lot of string manipulation. Definitely worth trying it out yourself.
For the first part, here's an example with jQuery:
$('#inputName').change(function() {
$('#inputURL').val($('#inputName').val());
});
This would set the value of inputURL to the value of inputName any time the value of inputName changes. For the string replacement, you'd modify it similar to this:
$('#inputName').change(function() {
$('#inputURL').val($('#inputName').val().replace(' ', '_'));
});
Note that the change event will be fired when the control loses focus. If you want to to happen as-you-type then try the keyup event. There are other events as well.
Add a keyup event to the name field that will update the url field:
<form>
<input type="text" id="name" />
<input type="text" id="url" />
</form>
...and the js:
addEvent(document.getElementById('name'), 'keyup', function () {
document.getElementById('url').value = this.value.replace(' ', '_');
});
function addEvent(ele, evnt, funct) {
if (ele.addEventListener) // W3C
return ele.addEventListener(evnt,funct,false);
else if (ele.attachEvent) // IE
return ele.attachEvent("on"+evnt,funct);
}
http://jsfiddle.net/XKEh5/
If you're only going to do some trivial stuff like this, then you'll be fine with plain old javascript. If you're going to be doing a lot of this sort of thing, plus any effects like fading out elements or whatnot, I suggest you look in to mootools or jQuery.
Here is an edited version of the above answer. There was an issue with the "value.replace(' ', '_');" where it would only take the space out between the first two words typed in. This code snippet below does it for all.
<script language="javascript" type="text/javascript">
addEvent(document.getElementById('name'), 'keyup', function () {
document.getElementById('url').value = this.value.split(' ').join('');
});
function addEvent(ele, evnt, funct) {
if (ele.addEventListener) // W3C
return ele.addEventListener(evnt,funct,false);
else if (ele.attachEvent) // IE
return ele.attachEvent("on"+evnt,funct);
}
</script>
I have a form input like so:
<input type="text" name="footer_contact_name" class="footer_contact_input" onfocus="this.value='';" onblur="return inp_cl(this);" value="Name" />
I have made a js function:
function inp_cl(input){
if(input.value==''){
return 'Name';
}
}
The problem is that the form input value wont change to "Name" onBlur!
Any ideas whats wrong here?
Or maybe you all have better suggestions to how to make the code as short as possible, or maybe even a whole different approach to this? All I want is the text "Name" to be the default value, then dissappear onFocus, and if nothing entered, reappear again.
Thanks
You need to change return 'Name'; to input.value = 'Name';
There's a few solutions to this:
Solution 1
A return in your onblur isn't what you want with the function the way you've written it. Without changing your function, you can change your onblur to make use of the return value of your function using this:
onblur="this.value=inp_cl(this);"
or you can fix your function to update the input contents directly:
function inp_cl(input) {
if (input.value == '') {
input.value = 'Name';
}
}
and change your onblur attribute to:
onblur="inp_cl(this);"
The issue with your onfocus is that it's going to wipe out the content of your input box regardless of what's in there, so if you've got it populated and you leave and come back to this field, it's going to be wiped out, so you need the reverse of your function and point your onfocus to that:
onfocus="inp_bl(input)"
<script type="text/javascript">
function inp_bl (input) {
if (input.value == 'Name') {
input.value = '';
}
}
</script>
Solution 2
Alternatively you can hook it up in javascript removing the need for your onfocus/onblur attributes in your markup - this script will hook the watermark onto the required inputs events directly:
<script type="text/javascript">
watermark = function(input, watermarkText) {
input.onfocus = function () {
if (this.value == watermarkText)
this.value == '';
}
input.onblur = function () {
if (this.value == '')
this.value == watermarkText;
}
}
new watermark(document.getElementById("txtName"), "Name");
new watermark(document.getElementById("txtAddress"), "Street Address");
new watermark(document.getElementById("txtPostalCode"), "Postal Code");
</script>
<input type="text" id="txtName" />
<input type="text" id="txtAddress" />
<input type="text" id="txtPostalCode" />
Now you can scrap your onfocus/onblur attributes in your markup... and you've got repeatable code meaning you don't have to contaminate your markup with onfocus/onblur functionality.
Solution 3
By far the simplest way I can think of though, is to use jQuery and the watermark plugin - if you're already using jQuery, then it's no big deal, but if you're not, it adds a bunch of overhead you may not want. jQuery is pretty lightweight, but it comes with a bit of a learning curve as the set based paradigm it uses isn't quite what imperative programmers are used to:
$(document).ready(function() {
//This is the important bit...
$("#id_of_your_input_control").watermark("String to use as watermark");
});
Then scrap your onfocus/onblur attributes as the watermark function will hook it all up for you.
For this kind of functionality, jQuery makes things much more expressive - if you're not familiar with it, it's definitely worthwhile looking up and getting familiar with.
Addendum
The nice thing about Solution 3 is that it handles things like styling of your text when the watermark is displayed so that it looks like a watermark, meaning you don't have to handle all that yourself. It also attaches to the onblur/onfocus properly. If you go with Solution 2, it's a naive solution - if you want multiple handlers for the onblur and/or onfocus then that method doesn't attach properly and all other handlers for those events will be replaced with these - so it's not technically a safe approach, though in 99.9% of cases, it will work just fine.
try dis dude its help u!!
<input type="Text" value="Name" onblur="if(this.value=='') this.value=this.defaultValue; "
onfocus="if(this.value==this.defaultValue) this.value=''; ">