I have a small basic html code with JavaScript . All I want is when I type 3,it should show me an image as specified and for 9 accordingly. This is the demo. Visit http://jsbin.com/UVOFeGIG/1/edit
Its working there. I don't know why the JavaScript doesn't work this way. Can anyone figure this out?
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript">
var num2img = {
"3":"visa",
"9":"mastercard"
};
$('#num').on('input', function(){
var val = this.value;
if(val.length<=1){
var n = this.value.charAt(0);
if(val && num2img[n]!==undefined){
$('#cardImage')[0].src = 'http://placehold.it/100x100/eee&text='+ num2img[n] +'.png';
}else{
$('#cardImage')[0].src = 'http://placehold.it/100x100/cf5';
}
}
});
</script>
<meta charset=utf-8 />
<title>Demo by Roko C.B.</title>
</head>
<body>
<input id="num"><br>
<img id="cardImage" src="http://placehold.it/100x100/cf5">
</body>
</html>
Try this
$(document).ready(function(){
var num2img = {
"3":"visa",
"9":"mastercard"
};
$('#num').keyup(function(){
var val = this.value;
if(val.length<=1){
var n = this.value.charAt(0);
if(val && num2img[n]!==undefined){
$('#cardImage')[0].src = 'http://placehold.it/100x100/eee&text='+ num2img[n] +'.png';
}else{
$('#cardImage')[0].src = 'http://placehold.it/100x100/cf5';
}
}
});
});
DEMO
try something like this
$(function(){
// you have not given any event
$('#num').on('keyup', function(){
var val = this.value;
if(val.length){//your length checking logically wrong
var n = this.value.charAt(0);
if(val && num2img[n]!==undefined){
$('#cardImage')[0].src = 'data/1357696142_mastercard1'+ num2img[n] +'.gif';
}else{
$('#cardImage')[0].src = 'http://placehold.it/100x100/cf5';
}
}
});
})
You need to change the $('#cardImage')[0] to $('#cardImage').attr('src' , 'http://placehold.it/100x100/eee&text='+ num2img[n] +'.png'); as # will return one element replace See the jsfiddle http://jsfiddle.net/mailtoshebin/dMWmw/
var num2img = {
"3":"visa",
"9":"mastercard"
};
$('#num').on('input', function(){
var val = this.value;
if(val.length<=1){
var n = this.value.charAt(0);
if(val && num2img[n]!==undefined){
$('#cardImage').attr('src' , 'http://placehold.it/100x100/eee&text='+ num2img[n] +'.png');
}else{
$('#cardImage')[0].src = 'http://placehold.it/100x100/cf5';
}
}
});
try capturing "keypress" event on input box, http://api.jquery.com/keypress/ OR
try capturing "change" event on input box, http://api.jquery.com/change/
Place you script code inside
$(document).ready(function(){
//your code goes here
});
and replace
$('#cardImage')[0].src = 'data/1357696142_mastercard1'+ num2img[n] +'.gif';
by
$('#cardImage')[0].src = 'http://placehold.it/100x100/eee&text='+ num2img[n] +'.gif';
Related
I to replace dot(.) into special character "।" on only dot(.) keypress.
I don't have much knowledge of coding.
I found a function, but when I paste a text file in the text area, it replaces all dots that are present in a text file into special characters "।".
If I am wrong, please edit or suggest the appropriate code in the code.
<!doctype html>
<html dir='ltr' lang='en-GB'>
<head>
<meta charset="UTF-8">
<title>test page</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
$('textarea').on("keyup", function(e) {
var val = $(this).val();
var str = val.replace('.', '।');
$(this).val(str);
});
});
</script>
</head>
<body>
<textarea></textarea>
</body>
</html>
To replace last . just key in. It does not handle the case when pressing dot and hold.
$(function() {
$('textarea').on("keyup", function(e) {
if (e.key === '.') {
const index = this.selectionStart;
const text = $(this).val();
if (index > 0 && text.charAt(index - 1) === '.') {
$(this).val(text.substr(0, index - 1) + '|' + text.substr(index));
this.selectionStart = index;
this.selectionEnd = index;
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea></textarea>
Replacing the last character if the input was a dot should fix it:
$(this).val($(this).val().replace(/.$/,"|"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
jQuery.fn.extend({
insertAtCaret: function(insert) {
var el = this[0]; // get DOM element instead of jQuery object
if (document.selection) {
// IE
sel = document.selection.createRange();
sel.text = insert;
} else if (el.selectionStart || el.selectionStart == '0') {
// other browsers
var startPos = el.selectionStart;
var endPos = el.selectionEnd;
el.value = el.value.substring(0, startPos) + insert + el.value.substring(endPos, el.value.length);
el.setSelectionRange(endPos + insert.length, endPos + insert.length); // put the cursor at the end of the inserted text
} else {
// last resort, shouldn't ever get here
this[0].value += insert;
}
}
})
$(function() {
$('textarea').on("keydown", function(e) {
if(e.key==='.'){
e.preventDefault();
$('textarea').insertAtCaret("|");
//$(this).val($(this).val().substring(0, $(this).val().length - 1)+'|');
}
});
});
</script>
<textarea></textarea>
I try to display text come with typing text effect.i tried like this
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<span id="holder"></span>
</body>
<script>
(function($)
{
$.fn.writeText = function(content) {
var contentArray = content.split(""),
current = 0,
elem = this;
setInterval(function() {
if(current < contentArray.length) {
elem.text(elem.text() + contentArray[current++]);
}
}, 100);
};
})(jQuery);
$("#holder").writeText("This is some text");
</script>
</html>
It's work but i need display Paragraph content like this but now to call Paragraph content in writeText.
If it's not good way to display Pragraph like typing effect. Please tell me how to solved my problem .Please give me any idea.
Thanks in Advanced.
i have simply modified your code for this, you just need get the content of each para and pass each para to your writeText function()
Just give class="effect" to to be animated
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<span id="holder"></span>
<p class="effect">Hi, this is Gokul Praveen' PARA 1!</p>
<p class="effect">Hi, this is James Bond's PARA 2!</p>
</body>
<script>
(function($)
{
$.fn.writeText = function(content) {
var contentArray = content.split(""),
current = 0,
elem = this;
setInterval(function() {
if(current < contentArray.length) {
elem.text(elem.text() + contentArray[current++]);
}
}, 100);
};
})(jQuery);
$(".effect").each(function(index) {
var text = $( this ).text();
$(this).empty();
$(this).writeText(text);
});
//$("#holder").writeText("This is some text");
</script>
</html>
Execute the code in a browser and check. Don't forget to mark it correct!
I think this fiddle will do the trick
Js Fiddle
$.fn.typer = function (text, options) {
options = $.extend({}, {
char: ' ',
delay: 1000,
duration: 600,
endless: true
}, options || text);
text = $.isPlainObject(text) ? options.text : text;
var elem = $(this),
isTag = false,
c = 0;
(function typetext(i) {
var e = ({
string: 1,
number: 1
}[typeof text] ? text : text[i]) + options.char,
char = e.substr(c++, 1);
if (char === '<') {
isTag = true;
}
if (char === '>') {
isTag = false;
}
elem.html(e.substr(0, c));
if (c <= e.length) {
if (isTag) {
typetext(i);
} else {
setTimeout(typetext, options.duration / 10, i);
}
} else {
c = 0;
i++;
if (i === text.length && !options.endless) {
return;
} else if (i === text.length) {
i = 0;
}
setTimeout(typetext, options.delay, i);
}
})(0);
};
$('#foo').typer(['<i>Anyone</i> <u>is</u> <b>awesome</b>!', 'Foo bar.', 1337]);
I have a HTML input in my site and i want to make "ENTER" forbidden in this box.
I mean user should not be able to enter into the box and if the user pasted some text, the enters gets converted to "space character" auto.
you can put this in the onchange of the text input/textarea
var text = document.forms[0].txt.value;
text = text.replace(/\r?\n/g, '');|
put this inside your header script tags and you should be good.
<script type="text/javascript" language="javascript">
window.onload = function() {
var txts = document.getElementsByTagName('TEXTAREA')
for(var i = 0, l = txts.length; i < l; i++) {
var func = function() {
var text = this.value;
text = text.replace(/\r?\n/g, '');
this.value = text;
}
txts[i].onkeyup = func;
txts[i].onblur = func;
}
}
</script>
<script type="text/javascript">
function stopRKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 13) && (node.type=="text")) {return false;}
}
document.onkeypress = stopRKey;
</script>
Uses setTimeout and clearTimeout
<input type='text' id='text'>
var timer = null;
$('#text').keydown(function(){
clearTimeout(timer);
timer = setTimeout(doStuff, 1000)
});
function doStuff() {
alert('do stuff');
}
use the doStuff() function to execute code 1 second after user stops typing
I have made a little fiddle of what I am doing, although it won't work in fiddle oddly, but does incrementally add a like in my version: http://jsfiddle.net/LQFrv/
function($scope) {
var hasLiked = false;
$scope.likeClicked = function() {
if( hasLiked === false ){
$scope.likeCount = $scope.likeCount + 1;
}
hasLiked = true;
if (hasLiked === true) {
$scope.liked = 'Unlike';
}
};
});
What I am trying to do is: Add a 'like' > disable 'like' and replace with 'unlike' > on next click of element, remove the like
Please help!
Thanks,
JP
HTML:
<body ng-app ng-controller="Ctrl">
<a ng-click="likeClick()" ng-init="liked='Like'; likeCount=0">
{{liked}} {{likeCount}}
</a>
</body>
JS:
function Ctrl($scope) {
var hasLiked = false;
$scope.likeClick = function () {
if (!hasLiked) {
hasLiked = true;
$scope.liked = 'Unlike';
$scope.likeCount += 1;
} else {
hasLiked = false;
$scope.liked = 'Like';
$scope.likeCount -= 1;
}
};
}
Working fiddle: jsfiddle.net/LQFrv/4/
Hope that helps!
edit: messed up with the link, it lead to another fiddle, sorry, now it should be correct!
I am trying to modify following script to do this check:
Check if input VALUE and ALT are the same.
If yes: empty VALUE
If no: keep VALUE
This is the script I am working on: (the part that i commented out, is where i tryed to figure out how to make the changes myself).
<script language="Javascript" type="text/javascript">
//<![CDATA[
jQuery.fn.placeholder = function(){
return this.each(function(){
var element = $(this)
var insertedNow =element.after("<span class='placeholder-spanbox'>"+ element.attr('alt')+ "</span>").attr("alt","").next('.placeholder-spanbox');
var leftOffset = (element.innerWidth() - element.width())/2+parseInt(element.css("border-left-width"));
var topOffset = ((element.innerHeight() - element.height())/2)+parseInt(element.css("border-top-width"));
var inputWidth = element.width();
var inputHeight = element.height();
var placeholderPos = inputHeight + topOffset + leftOffset;
insertedNow.css("padding-left",leftOffset+"px").css("padding-top",topOffset+"px").css("opacity",0.5).css("display","block").css("margin-top",-placeholderPos).css("cursor","text");
var objCSS = {'-webkit-transition':'opacity 100ms ease-in','-moz-transition':'opacity 100ms ease-in','-o-transition':'opacity 100ms ease-in','-ms-transition':'opacity 100ms ease-in','transition':'opacity 100ms ease-in','font-size':element.css('font-size'),'font-family':element.css('font-family'),'color':'#000000','font-weight':element.css('font-weight'),'width':element.css('width'),'float':element.css('float')};
insertedNow.css(objCSS);
//insertedNow.offset(element.offset());
element.bind("focus",updateSpanStatusFocus);
element.bind("keydown",updateSpanStatusKeyDown);
element.bind("keyup",updateSpanStatusKeyUp);
element.bind("blur",updateSpanStatusBlur);
insertedNow.bind("click",clickSpanBox);
var inputVal = element.attr("value");
var inputAlt = element.attr("alt");
//$(this).attr("value",+inputVal);
// if(inputVal == inputAlt){
// $(this).attr("value","123");
// }
if(element.val()!==""){
insertedNow.css({'opacity':0});
}
});
function clickSpanBox(event){
event.preventDefault();
var inputBox = $(this).prev();
inputBox.focus();
}
function updateSpanStatusFocus(event){
var $this= $(this);
if($this.val()==""){
var spanBox = $this.next('.placeholder-spanbox');
spanBox.css("opacity","0.3");
}
}
function updateSpanStatusKeyUp(event){
var $this= $(this);
if($this.val()==""){
var spanBox = $this.next('.placeholder-spanbox');
spanBox.css("opacity","0.3");
}
}
function updateSpanStatusKeyDown(event){
var $this = $(this);
if($this.val()=="" && (event.keyCode>54 || event.keyCode == 32)){
var spanBox = $this.next('.placeholder-spanbox');
spanBox.css("opacity","0");
}
}
function updateSpanStatusBlur(){
var $this= $(this);
$this.val(Trim($this.val()+''));
if($this.val()==""){
var spanBox = $this.next('.placeholder-spanbox');
spanBox.css("opacity","0.5");
spanBox.css("color","#000000");
}
}
}
$(document).ready(function(){
$('.spanOverlay').placeholder();
});
//]]>
</script>
And here the html markup example:
<input type='text' name="userName" class='contactInput spanOverlay' alt='* Name' value='test'></input>
Thanks for your help!!
Is this what you want?
if (element.val() == element.attr('alt')) {
element.val("");
}
there's something called .defaultValue in javascript u could use this to compare against current value
here's an example on how its done
http://www.miuaiga.com/index.cfm/2009/8/31/jQuery-form-input-defaultValue