|
JavaScript - How Do I Change To Uppercase W/ Mouse Paste Too?
Hi everyone, I've been trying to amend this so that when I paste text in with a mouse it changes to uppercase automatically. Does anyone know how this can be done?
Code: <html>
<head>
<script type="text/javascript">
function upperCase(x)
{
var y=document.getElementById(x).value;
document.getElementById(x).value=y.toUpperCase();
}
</script>
</head>
<body>
Enter your name: <input type="text" id="fname" onchange="upperCase(this.id)" />
</body>
</html>
Thanks Similar TutorialsIn a <textarea ..., the user can do this: 1) copy some text from somewhere; 2) right-mouse click on the textarea, from the floating menu, select the Paste, the text is pasted in the textarea. How can I detect the action of the Paste menuitem being clicked (on IE and Firefox, respectively)? Thanks Scott I have a pop-up message box, that I'd like help changing to a mouse-over message box. Any help would be appreciated. Thanks Code: <style>
.msg { display:block; position:absolute; top:300px;
left:300px; width:350px; background-color:#eeeeff; border-style:solid;
border-width:1px; padding:15px 20px 5px 20px; }
.msgclose { text-decoration:none; font-size:0.9em;
font-variant:small-caps; margin-top:10px; }
</style>
<div id="popupMsg" class="msg">
You must read this message.<br>
This is a test message box <br />
<div style="width:100%; text-align:right;">
<a class="msgclose" href="#" onclick="document.getElementById('popupMsg').style.display = 'block';
return false;"><font color="#800000">Close Window</font></a>
</div>
background: display 3-4 pictures and a generic parargraph. when you mouseover a picture the parargragh changes to the bio of the person pictured and doesn't change until a different picture is mouseovered or a reset butten is clicked. current code: i have adapted some code I found (thank you, donator) to basicly hide and unhide a span ID on mouseover. if functions as i want but the element id is hardcoded and i would like it to be dynamic on mouse location. not being that familair w/ coding and / or javascript; i'm stuck. Code: <script type="text/javascript">
var el;
var cpic; //elementId via mouse position
window.onload=function() {
el=document.getElementById('pic1');
el.onmouseover=function() {
changeText('hide','show')
}
}
function changeText(cl1,cl2) {
document.getElementById('span1').className=cl1;
document.getElementById('span2').className=cl2;
}
</script>
so the above works for 1 image, but as you can see "pic1" is hard coded. i figured i could define "cpic" to takes it's place, but i'm not sure how to get the elementId (i'm assuming it would be from the mouse position). if the above code is totaly the wrong approach let me know. it was just the first thing i found that seemed to do what i needed. on the HTML side "span1" is the default text and "span2" is the hidden mouseover text. i'm assuming that by adding 2 more pictures i'll need to add "span3" and "span4". i'll also have to find a way of hiding the other spans. I.E. if i go from pic2 to pic3 then, the pic2 text will have to be hidden before pic3 text is displayed. one thing i don't want to do is restrict the mouse to be focused on the picture to display the text. the text should change only when another picture is in focus or the rest button is clicked. any direction / suggestions would be a big help. regards, Fatmann66 I have this image map and I need to change the cursor to finger on mouse over: <map name="Map" > <area shape="rect" coords="0,61,121,140" onClick="scr_valid(1)"> <area shape="rect" coords="175,101,445,204" onClick="scr_valid(0)" > </map> Adding href (<area shape="rect" coords="175,100,445,203" onClick="scr_valid(0)" href="#" >) does not work. Any body could help please? Thank you. I Need some help with mouse overs. I have 2 images, Image A and Image B. I need to mouse over Image A and have Image B change. Please help.
Hi all, I tried to create a mouse over effect using jquery. When user hovers #box1_trigger link, the #service_box1 div should change it's background position. The code i created is the following it's not working for some reason. html: Code: <div class="service_box box1" id="service_box1">
<a href="#" id="box1_trigger">
<h3>bla bla</h3>
<p>bla bla bla bla bla</p>
</a>
</div>
javascript: Code: <script type="text/javascript">
$(document).ready(function() {
$("#box1_trigger").hover(
function() {
$("#service_box1").stop().animate({backgroundPosition:"(0 -250px)"}, "slow");
},
function() {
$("#service_box1").stop().animate({backgroundPosition: "0 0"}, "slow");
}
);
});
</script>
css: Code: #service_box1{
width:318px; height:282px;
float:left;
background:url(images/services_panel.png) 0 0 no-repeat;
}
a#box1_trigger{
width:100%; height:100%;
float:left;
display:block;
}
Could you help me fix this please?? Hi, Am trying to change both, the background color and the mouse pointer to hand on the mouseover event. Am using this to change the background color: Code: onMouseover="this.bgColor='#55FF55'"onMouseout="this.bgColor='#AEFFAE'" How and i add the "change pointer to hand" on this as well? Thanks I've got to have a typo somewhere, but i can't seem to find it. I need a new pair of eyes to point it out for me. background: trying to code a mouseover link for a nav bar. everything is working( hyperlink, normal image shows up) but when i mouse over the image swap doesn't happen. I have 2 parts of code. 1st preloads images and does the swap function. loads in <head> See below: Code: <SCRIPT language="javascript" type="text/javascript">
if (document.images)
{
/* preload images */
var subcontractorsOn = new Image ();
subcontractorsOn.scr = "subcontractorsOn.gif";
var subcontractorsOff = new Image ();
subcontractorsOff.scr = "subcontractorsOff.gif";
}
function mouseOn (imgName)
{
if (document.images)
document [imgName].scr = eval (imgName + "On.scr");
}
function mouseOff (imgName)
{
if (document.images)
document [imgName].scr = eval (imgName + "Off.scr");
}
</SCRIPT>
2nd just calls the functions to preform the swap. this is in the <body> see code below Code:
<a href="subcontractors.htm" onMouseOut="mouseOn('subcontractors')"
onMouseOver="mouseOff('subcontractors')">
<img src="subcontractorsOff.gif" height="40" width="133" name="subcontractors" id="subcontractors" border="0" alt="subcontractors"></a>
any insight would be great. regards, Fatmann66 This is pretty basic. I have a coupon code text box and need to ensure whatever the user enters is converted to uppercase before it is validated. The problem is, someone else wrote the code and I have no idea where or how to put in the code to change the text to uppercase. I would appreciate your help. Payment.php: PHP Code: <input type="text" name="coupon" id="coupon-input" class="coupon-input" placeholder="Enter coupon code" style="color:#000;"> <input class="bt2 apply-btn" type="button" value="Apply" id="apply-btn"> <script> // When the browser is ready... $(function(){ $("#apply-btn").click(function(){ $("#apply-btn").attr("disabled", "disabled"); $("#apply-btn").val('Checking'); $("#amount").val(<?php echo number_format($item_price, 2); ?>); $(".form-product-details").html('<b>$<span id="input_14_1001_price"><?php echo number_format($item_price, 2); ?></span></b>'); $.ajax({ url: 'validate-coupon.php', type: "POST", data: {val: $("#coupon-input").val(), amt:$("#amount").val()}, dataType: 'JSON', success: function(res) { $("#apply-btn").val('Apply'); $("#apply-btn").prop("disabled", false); if(res.type=='error'){ $("#msg").html("<span style='color:red;font-weight:bold;'>Invalid Coupon.</span>"); } else { $("#msg").html("<span style='color:green;font-weight:bold;'>Coupon is valid.</span>"); $(".form-product-details").html('<b><span style="text-decoration:line-through">$<?php echo number_format($item_price, 2); ?></span> $<span id="input_14_1001_price" class="underlined">'+res.amt+'</span><br /><span>'+res.msg+'</span></b>'); $("#amount").val(res.amt); } } }); }); }); </script> validate-coupon.php: PHP Code: $coupon = array( array("code" => "COUPON50", 'value'=>'50', 'type'=>'P'), ); if(isset($_POST['val']) && $_POST['val']!='' && isset($_POST['amt']) && $_POST['amt']!=''){ $matched = false; foreach($coupon as $coup){ if($coup['code']==$_POST['val']){ $matched = true; $amt = $_POST['amt']; if($coup['type']=='P'){ $new_amt = $amt - ($amt/100)*$coup['value']; $msg = $coup['value']."% off coupon code applied"; } else if($coup['type']=='F'){ $new_amt = $amt - $coup['value']; $msg = "$".$coup['value']." off coupon code applied"; } break; } } if($matched){ echo json_encode(array("type" => "success", 'amt'=>number_format($new_amt, 2), 'msg'=>$msg)); } else { echo json_encode(array("type" => "error")); } } else { echo json_encode(array("type" => "error")); } exit; Hi there, I would like to sort the items regardless of uppercase/lowercase after moving them to another listbox. Here is my code, and I cannot figure out what is wrong with it. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
function MoveItem(unselectedLst, selectedLst)
{
var unselectedEmail = document.getElementById(unselectedLst);
var selectedEmail = document.getElementById(selectedLst);
var uValue = unselectedEmail.value;
var sValue = selectedEmail.value;
if ((uValue != null) && (sValue != null))
{
if( unselectedEmail.options.selectedIndex >= 0 )
{
var newOption = new Option(); // Create a new instance of ListItem
newOption.text = unselectedEmail.options[unselectedEmail.options.selectedIndex].text;
newOption.value = unselectedEmail.options[unselectedEmail.options.selectedIndex].value;
selectedEmail.options[selectedEmail.length] = newOption; //Append the item in selectedEmail
unselectedEmail.remove(unselectedEmail.options.selectedIndex); //Remove the item from unselectedEmail
//sort items in listbox in alpha order
arrTexts = new Array();
for(i=0; i<unselectedEmail.length; i++)
{
arrTexts[i] = unselectedEmail.options[i].text;
}
arrTexts.sort();
for(i=0; i<unselectedEmail.length; i++)
{
unselectedEmail.options[i].text = arrTexts[i];
unselectedEmail.options[i].value = arrTexts[i];
}
//sort items in listbox in alpha order
arrayTexts = new Array();
for(i=0; i<selectedEmail.length; i++)
{
arrayTexts[i] = selectedEmail.options[i].text;
}
arrayTexts.sort();
for(i=0; i<selectedEmail.length; i++)
{
selectedEmail.options[i].text = arrayTexts[i];
selectedEmail.options[i].value = arrayTexts[i];
}
}
}
else
{
alert('Select Item From The List. ');
}
}
</script>
</head>
<body>
<table width="300">
<tr>
<td>
<select id="ListBox1" name="ListBox1" size="6">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</td>
<td>
<p>
<input onclick="MoveItem('ListBox1', 'ListBox2');" type="button" value="->" />
</p>
<p>
<input onclick="MoveItem('ListBox2', 'ListBox1');" type="button" value="<-" />
</p>
</td>
<td>
<select id="ListBox2" name="ListBox2" size="6">
<option>allalong@msn.com</option>
<option>boys@hotmail.com</option>
<option>cy@yahoo.com</option>
<option>bread@hotmail.com</option>
<option>eetApple@ymail.com</option>
<option>applepie@gmail.com</option>
</select>
</td>
</tr>
</table>
</body>
</html>
This should be simple, but I can't quite get it to work without some kind of side-effect. I've checked the forum and there doesn't seem to be anything that directly relates. What I want to do is convert the text that a user is typing to uppercase as they type it. What I have so far: function convertToUppercase(aControl) { var cursorKeys ="8;46;37;38;39;40;33;34;35;36;45;"; if (cursorKeys.indexOf(event.keyCode+";") == -1) { aControl.value = aControl.value.toUpperCase(); } } <input onkeyup="convertToUppercase(this)"/> The problem that I have is that this moves the cursor to the end of the line after every character. If you want to go and add something to the middle of what you've typed, you can type one character and then the cursor jumps to the end. e.g. inserting "abc" between the "R" and "E" of "FRED" gets you: FRAEDBC What I need is either: 1) ability to get the cursor/caret position and restore it after I set the uppercase string -- or -- 2) ability to intercept the keystroke in the event and make it uppercase before the browser adds it naturally to the input's value. Solution should be browser-independent (if at all possible). I'm mostly interested in IE though. Thanks, Chris do anyone know how do make a form that automatic tab when we paste something into the box and sort it out automatically. Like cd-key box. when we copy n paste cd-key into the box it automatic inert everything into correct places. Thanks For some reason after I modified the events.js script for my events, the events.js is not being read. I have reloaded the page, cleared the cache, and reinstalled the .js file. What is wrong? I am trying to use the cut and paste OnMouseover Slideshow that is featured at the JavascriptKit.com. I'm getting a line error code which reads "Line:81 Error: Expected ';' I have tried everything I can think of to eliminate this error...seems I know just enough to be dangerous, not enough to debug. Can someone please help me? Or at least tell me if there's someplace specific in between the script tags or elsewhere that I need to look? Killing me in Kentucky, Pam Hello everyone! I'm using Cut & Paste Plus Size image viewer ( http://www.javascriptkit.com/script/...geviewer.shtml ) , but I noticed some problem. When the large image is loaded initially, it's not always positioned on the center of the page. After that the script works just fine, until the browser is re-started. There is link to my page: http://www.accentironwork.com/yard%20decorations.html Script code is the http://www.accentironwork.com/plusimageviewer.js http://www.accentironwork.com/plusimageviewer.css I hope some body can help me. Thanks in advance! Hello, I have a question about the cut and paste javascript events calendar at http://www.javascriptkit.com/script/...calendar.shtml Is there any way to add links to the event description that appears in the box below the calendar? Thanks for your help. Hi guys (and ladies) I am a bit stuck and hope this community might shine a light, or even better can supply me with a solution. I want to do the following: - Having an ordinary webpage containing links - I will link the links with files (word processing files , MS Word, Open Office writer, wordpad or similar) - Now when clicked on the link I want the 'system' to copy the contents of the linked file to the windows clipboard, so when clicking paste, the text from the file is pasted wherever I want. To make clear, I don't want any word processing app to open, just click the link and paste where it needs to be. Possible?? MOST LIKELY but I have no clue how. Any chance someone might know the answer??? I am looking forward to the replies! Thanks PvL Hi all, I am having problems with a script 'Cut & Paste CSS Horizontal List Menu' from http://www.javascriptkit.com/script/...stopmenu.shtml It works on my site with Firefox but not IE 8. My site url is http://www.bridgepoint-llp.co.uk/ I would be grateful for any help anyone could supply Hello, I created a simple WYSIWYG for creating CSS based webpages. It works exactly as assumed in Safari and Chrome. However, in firefox, when you copy/paste more than one line of text, instead of formatting it as html, in puts in line breaks causing the array storing all of the data to break into multiple lines and causing an unterminated string literal. Can anyone, 1. suggest why it is behaving this way? 2. suggest a work around to allow it to work on FF? hi, i need to be able to allow a user to past into an editable div (via whatever the user chooses: right-click and paste, shortcut key, etc), but i want to discard formatting and only take the plain text. i can't use a textarea since the div will allow basic formatting (bold and italic) if applied by user-initiated events. the onbeforepaste event looked promising, but according to quirksmode the support is so limited as to be unusable. i searched the board, so apologies if this has been asked and answered. tyia for any suggestions. |
|||||||