I have done a validation to avoid special characters with the following code for all input text, however, I have input text that require having special characters. My code is as follows
$('.twTextinput input, .twTextinput textarea').not( $( '#txtEmailPersonal input, #txtEmailTrabajo input' )).keyup(function (){
this.value = this.value.replace(/[^a-zA-Z0-9 _]/g,'');
});
The problem is this, I have an input text that must be within the selector .not(). Is a input text that has an id that starts with "iccw". I tried with this code but does not work
$('.twTextinput input, .twTextinput textarea').not( $( '#txtEmailPersonal input, #txtEmailTrabajo input, input[id^="iccw"]' )).keyup(function (){
this.value = this.value.replace(/[^a-zA-Z0-9 _]/g,'');
});
Any suggestions.
Thanks in advance.
That is an awfully complex way single out one special input, don't you think?
I would tend to want find all "regular" textareas or inputs into an container and use find to collect them, and then single out the other "normal" inputs.
$normal_input_list = $(container).find( 'input.normal, textarea.normal' );
$special_input_list = $( '#icww' );
onKeyupNormal = function (){
this.value = this.value.replace(/[^a-zA-Z0-9 _]/g,'');
};
// and now bind the handler
$normal_input_list.on( 'keyup', onKeyupNormal );
If there is a good reason to select as you have, then I have determined the following should work:
$('input, textarea').not( '#wmd-input' );
Specifying input and ID is redundant, as ID is already unique across the page.
Hope that helps!
Here's a hack:
$('.twTextinput input, .twTextinput textarea').not( $( '#txtEmailPersonal input, #txtEmailTrabajo input'
)).keyup(function (){
if( this.id != 'iccw' ) {
this.value = this.value.replace(/[^a-zA-Z0-9 _]/g,'');
}
});
I would tend to control this with HTML attributes. I find it more manageable.
<textarea data-allowedchars="[^a-zA-Z0-9 _]"><textarea>
<textarea ></textarea>
<input data-allowedchars="[^a-zA-Z0-9 _]" />
<input />
JS
$("body").on("keyup", "[data-allowedchars]",
function(e){
var $t = $(this),
re = new RegExp($t.data("allowedchars"),'g');
$t.val($t.val().replace(re, ""));
}
);
Sorry this doesn't directly answer your question. It is hard to see what is wrong with your syntax without seeing the code.
Related
I have the following input element:
<input type="hidden" id="input_2_204_data" name="input_2_204_data" value>
I need to capture an event when it is changed and value is not empty. I have looked over older SO's questions, however nothing seemed to work.
Here is the latest snippet I have come up with, however it does not work either, and there are no errors in console:
jQuery(document).ready(function(){
var $sign = jQuery('[id$=input_2_204_data]');
$sign.on("change", function(){
alert('hey');
});
});
Any help or guidance is much appreciated.
jQuery(document).ready(function(){
var $sign = jQuery('#input_2_204_data');
alert($sign.val())
});
You have wrong selector to target element, You need to use ID selector # here to target element by id:
var $sign = jQuery('#input_2_204_data');
$sign.on("change", function(){
console.log($(this).val());
});
You have to use the correct selector #input_2_203_data. Using .change() works just fine.
jQuery(document).ready(function(){
var $sign = jQuery('#input_2_204_data');
$sign.change(function() {
if($sign.val() != '') {
alert( "Handler for .change() called." );
}
});
});
jsfiddle
http://jsfiddle.net/m3g6rjok/1/
html
<textarea id="feedback" rows="4" cols="50" name="comment" maxlength="50">Enter text here...</textarea>
<br>
<input type="text" value="10" id="lenbox"></input>
js
$(document).ready(function(){
$( "#feedback" )
.keyup(function() {
var value = $( this ).val();
alert(value)
$( "#lenbox" ).val( value );
})
.keyup();
})
I need to calculate the number of words thats entered on the textarea and need to display it on the text box below..I'm using the keyup event to check but it gets triggered even on the page load. How can I fix it
Remove the .keyup(); from your code. This triggers the keyup event on page load.
The keyup event is raised because you trigger one. Remove the .keyup() after your handler function declaration:
$("#feedback").keyup(function() {
var value = $(this).val();
alert(value)
$("#lenbox").val(value);
})
Because you have .keyup(); at the end of your JQuery statement.
Just remove it
You should not trigger the keyUp again. Also, you should move the code that's updating the value outside of the keyUp function, so you can also trigger the code on page load. After you've done that, it's just taking a string, split on spaces and count the words:
var calculateCount = function() {
var value = $('#feedback').val();
var count = value.split(" ").length;
$( "#lenbox" ).val( count );
};
$(document).ready(function(){
$("#feedback").keyup(calculateCount);
calculateCount();
})
http://jsfiddle.net/qd6aznwa/
DEMO
First, Remove .keyup() as has been pointed out already
Then, use input instead of keyup so that I can also catch pasted text.
Finally, count the number of words by using the split method and the length property.
$(document).ready(function(){
$( "#feedback" ).on('input',function() {
$( "#lenbox" ).val( this.value.split(' ').length );
});
});
If you dont mind using HTML5 use the placeholder property
<textarea id="feedback" rows="4" cols="50" name="comment" maxlength="50" placeholder="Enter text here..."></textarea>
Now, If I hit the button, it clears all in the input field, and it automatically inputs "#marry" to it.
But, I don't want it to be cleared:(
What if I want to add "#marry" to the end of the strings that already exists in the input field?
How can I customize my javascript part?
Input field
<textarea class="box text_area" cols="10" id="input" name="comment[body]"></textarea>
button
<a href="#topic" id="username" value="#marry”><span class='btn'>reply</span></a>
javascript
$(document).on('click', 'a#username', function() {
$(".box#input").val($(this).attr('value'));
}
val() has a callback with the arguments index and value, you can use that to easily add something to the value.
$(".box#input").val(function(_, val) {
return this.value + 'some extra string';
});
$(document).on('click', 'a#username', function() {
var self = this;
$(".box#input").val(function(_, val) {
return val + self.value;
});
});
First of all adeneo's answer is good and you should read it. Here is an alternative solution that does not use jQuery:
I assume that both these elements are a part of a form. Let's say for instance the form has an ID of "post". We can access it using document.forms and then its fields as such:
var input = document.forms.post["comment[body]"];
Now, we can add to its value whenever the button is clicked. First select username with getElementById or querySelector and then add the event:
username.addEventListener("click", function(ev){
input.value += ev.target.value;
});
Or with jQuery (this also delegates if the element is not in the DOM yet):
$(document).on('click', 'a#username', function() {
input.value += this.value;
});
It might be desirable to append an extra space between the current text and the username.
append #marry at the end of text area. you can use bellow code its working fine.
$(document).on('click', 'a#username', function () {
var txtvalue = $(".box#input").val();
$(".box#input").val(txtvalue + $(this).attr('value'));
});
see jsfiddle link http://jsfiddle.net/F6mkh/1/
I have my markup like this
<div class="text-input-area">
<input type="text" id="text-input"/> <br />
<input id="button" type="submit" value="Preview" />
</div><!--.text-input-area-->
In the input area I will type only text. Now when I will click on button Preview it should show the text that I had type. For that I have made my jquery like this
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#button').click(function() {
var textvalue = $( "#text-input").text();
alert('textvalue');
});
});
</script>
But its not working at all. Can someone tell me how to do this?
demo http://jsfiddle.net/gmeEL/
API:
.val() : http://api.jquery.com/val/
Hope this will fit the cause :)
code
jQuery(document).ready(function() {
jQuery('#button').click(function() {
var textvalue = $( "#text-input").val();
alert(textvalue);
});
});
Use $( "#text-input").val() instead of $( "#text-input").text() and alert(textvalue) instead of alert('textvalue')
Complete Code:
jQuery(document).ready(function() {
jQuery('#button').click(function() {
var textvalue = $( "#text-input").val();
alert(textvalue);
});
});
Fiddle Demo
Two problems
need to use .val() to get the value of an input field
need to use the variable textvalue for the alert not a string literal 'textvalue'
Try
jQuery(function ($) {
$('#button').click(function () {
var textvalue = $("#text-input").val();
alert(textvalue);
});
});
for inputs and select use $(selector).val()
for span use $(selector).text()
It should be a val() i.e. a jquery function that returns a value of the element
var textvalue = $( "#text-input").val();
Please note that
The .text() method cannot be used on form inputs or scripts. To set or
get the text value of input or textarea elements, use the .val()
method. To get the value of a script element, use the .html() method.
http://api.jquery.com/text/
I facing problem with my jquery, on showing input text based on input value.
Here is the JS fiddle demo :
http://jsfiddle.net/Ltapp/364/
When I try to input #hotmail, the input box will show. But when I want to type some text in the #hotm input box, it will hide again.
JS code :
$(window).load(function(){
var myString = '#hotmail';
$('#hotm').hide();
$("input").keyup(function () {
var value = $(this).val();
if($(this).val().match(myString)) {
$('#hotm').show();
} else {
$('#hotm').hide();
}
});
});
It's because your selector $("input") affects both input elements. I have updated it to the $("input:first") selector instead. JsFiddle here
$("input:first").keyup(function () {
var value = $(this).val();
if(value.match(myString)) {
$('#hotm').show();
} else {
$('#hotm').hide();
}
});
As many has said, you are binding the event on all the inputs I did a little change:
$(function(){
var myString = /#hotmail/ig;
$("#check").bind('keyup checkvalue', function() {
$('#hotm')[myString.test(this.value) ? 'show' : 'hide']();
}).trigger('checkvalue');
});
using regex if you are using #HoTmAil it will also hit on that, and also added a custom event checkvalue to see if #hotm should be visible on for example a postback on the form you might be using.
demo: http://jsfiddle.net/voigtan/xjwvT/1/
You're affecting all inputs. Either give each one a unique ID / Class or use the jQuery $(this) method.
See JSFiddle Here:
http://jsfiddle.net/Ltapp/366/
<input type="text" id="firstinput"/>
<p id="secondinput"><input type="text"/></p>
var myString = '#hotmail';
$('#secondinput').hide();
$("#firstinput").keyup(function () {
var value = $(this).val();
if($(this).val().match(myString)) {
$('#secondinput').show();
} else {
$('#secondinput').hide();
}
});
use this for your if part :
if($(this).val().match($(this).val().substr(0,strlen($(this).val())))
it's because the new box also = "input"; if you give the hotmail textbox it's own id, it won't hide
<input id="hotmail" type="text"/>
and then
$("#hotmail").keyup(function () {...});