|
JavaScript - Prevent Tab Text Highlight / Disable Tab Text Selection
Hi,
Here's a sample form: Code: <form action="#" method="post"> Name:<br /> <input type="text" name="name" value="your name" /><br /> E-mail:<br /> <input type="text" name="mail" value="your email" /><br /> <input type="submit" value="Send"> </form> When you tab to a text input, the value gets highlighted. How can it be disabled? Any help is appreciated! Mike Similar TutorialsHi, On my webpage I have an embedded link that jumps the users up to a text box for logging in. I'm trying to find a way so when they click that link, it will not only jump up to the text box but highlights it as well. I then want the highlight color to fade back to normal. I've been searching around but I can't find something that will work. Any ideas? Hi all, Please forgive me if this is a dumb question. Is it possible to highlight the contents of all text and/or textareas within one form simultaneously? I've tried to do it using the funciton below, it cycles through allright, but only highlights each field whilst it is in focus, then loses it when it moves to the next field. The result is that only the last text/textarea within the form is highlighted. My aim is to highlight all fields for subsequent spell checking. Any help would be appreciated. Code:
<html>
<head>
<script type="text/javascript">
function SelectText(){
var fields = document.getElementsByTagName("input");
for (var i = 0; i < fields.length; i++){
var node = fields[i];
if (node.getAttribute('type') == "text"){
node.focus();
node.select();
}
}
}
</script>
</head>
<body>
<form id="form1" action="">
<p></p>
<input type="text" id="one" style="width:500px;">
<p></p>
<input type="text" id="two" style="width:500px;">
<p></p>
<input type="button" value="Select Text" onclick="javascript:SelectText();">
</form>
</body>
</html>
Hi, I am having trouble searching for text in a textarea in all browsers. I display formatted text in a textarea with tinyMCE editor. Some of the text contains blanks ('______') which the user needs to find and fill in (usually with a number). I have written a new button on the toolbar of the editor which will find and highlight the blank when clicked. The user will click the button, fill in the text, click the button, fill in the text, etc. In IE the blanks are highlighted just fine. The only problem is: user clicks button and first blank is highlighted. User fills in the text then clicks the button again. Second blank should be highlighted but it skips right to the third blank. If you don't fill anything in, the next blank will be highlighted. If you highlight and then fill anything in, the next blank is skipped and the following blank is highlighted. Any thoughts? But my worst problem is with Mozilla. I get an error. It does not act like setSelectionRange(pos, pos+len(str)) is a valid function call. I receive the following error: "component returned failure code: 0x800004005 (NS_ERROR_FAILURE)[nsIDOMNSHTML TextareElement.setSelectionRange]" Here is my function: var win = window; var n = 0; var str = '______'; function FindBlanks() { var txt, i, found; win = tinyMCE.get('txtPolicy').getDoc(); if (str == "") return false; if (window.execScript) { txt = win.body.createTextRange(); //Find the nth match from the top of the page for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) { txt.moveStart("character", 1); txt.moveEnd("textedit"); } // If found, mark it and scroll it into view if (found) { txt.moveStart("character", -1); txt.findText(str); txt.select(); txt.scrollIntoView(); // n = i--; n++; } //Otherwise, start over at the top of the page and find first match else { if (n > 0) { n = 0; alert("End of document has been reached."); } //Not found anywhere, give message. else alert("No blanks found."); } } else { //document.getElementById('txtPolicy').setFocus; var ht = '______'; if (ht.length == 0) { alert('highlightText has zero lenth'); return false; } var str2 = document.getElementById('txtPolicy').value; var startPos = str2.indexOf(ht); if (startPos == -1) { alert('No blanks found'); return false; } document.getElementById('txtPolicy').focus(); document.getElementById('txtPolicy').setSelectionRange(startPos, startPos + ht.length); return true; if (n == 0) alert ("No blanks found."); } return false; } Can anyone help me with this? Thanks. This might be a little complicated. I'll try to be as clear as possible. I got some help from Old Pedant a little while ago and the code worked great. The problem came after I tried some code that will highlight (select) text in a DIV: Code: <script type="text/javascript">
function selectNode (node) {
var selection, range, doc, win;
if ((doc = node.ownerDocument) && (win = doc.defaultView) && typeof
win.getSelection != 'undefined' && typeof doc.createRange != 'undefined'
&& (selection = window.getSelection()) && typeof
selection.removeAllRanges != 'undefined') {
range = doc.createRange();
range.selectNode(node);
selection.removeAllRanges();
selection.addRange(range);
}
else if (document.body && typeof document.body.createTextRange !=
'undefined' && (range = document.body.createTextRange())) {
range.moveToElementText(node);
range.select();
}
}
</script>
Code: <div id="bb1"></div>
<form>
<input type="button" value="Click Here to Highlight Data" onclick="window.selectNode(document.getElementById('bb1'));" style="margin-left:4px; font-weight:bold; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:14px;">
</form>
It works great with Firefox and Internet Explorer, but there is a problem with Opera. The contents of the DIV is selected, but so is everything after the DIV. Below is a link to the page, but be sure to turn down your speaker volume before you visit the page so you won't have a heart attack: http://www.randomterrain.com/atari-2...music-toy.html The DIV is empty when the page loads. To put content in the DIV, jump down to All Sounds and left click on a couple of the numbers than run from 0 to 31, then jump down to the DIV. When you click on the "Click Here to Highlight Data" button, you'll see that more than the contents of the DIV is selected. I hope someone can figure out how to make the code work properly with Opera. Thanks. Hi, As you will see with the code below when the text ONE and TWO are clicked on it displays a background color. When ONE is activated TWO is off. When TWO is activated ONE is off. But when the page loads I want ONE to display the background color. When ONE displays the background color after the page has loaded, I want to click on TWO to display it's background color and ONE should turn off as it does now. I can't figure out how to activate the background color for ONE when the page loads. Then if it is activated when the page loads, how to turn off ONE and turn on TWO when clicked on and visa versa. 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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
var btn = function () {
var active = null, bcolor = '#84DFC1';
if (this.attachEvent) this.attachEvent('onunload', function () {
active = null;
});
return function (element) {
if ((active != element) && element.style) {
if (active) active.style.backgroundColor = '';
element.style.backgroundColor = bcolor;
active = element;
}
};
}();
</script>
</head>
<body>
<div onclick="btn(this);">ONE </div>
<div onclick="btn(this);">TWO </div>
</body>
</html>
I retrieve a list of links from a database using ajax, then I assign them to the innerHTML property of a div whose display property is set to "none" Then I set the display property to "display" to get a drop-down listbox. The problem is the links in the list are all hilighted like they've been dragged over by a mouse. How do I prevent these links from highlighting? Is there a javascript code so that you can disable a textarea but parts of the page can still add to the textarea if your peter i mean about the other javascripts you told me. Sorry if this is confusing just ask me and i will rewrite it
I am trying to change text in one cell of a table when a user selects an item from a select menu. The data for the select menu is being pulled from a database (which works fine). The select menu is displayed as expected; however the text in the div tag always comes up as "undefined" The code below is part of a PHP script (thus \" instead of ") I would like to employ a method that does not require extra Javascript in the <head> section as in this instance the code is being output from an include that is called long after the <head> area of the document is processed. Here is what I have Code: <tr><td><select name=\"race\" onchange=\"document.getElementById('ExtraInfo').firstChild.nodeValue = this.options[this.selectedIndex].extrainfo\">
<option selected=\"selected\" value=\"\">Select Race</option>\n";
$sql = mysql_query("SELECT * FROM races");$i=1;
while ($row = mysql_fetch_array($sql)){
$output .= "<option value=\"$i\" ExtraInfo=\"{$row['des']}\">{$row['race']}</option>\n";
$i++;
}
$output .= "</select></td>
<td><div id=\"ExtraInfo\">Select Race</div></td></tr>
Any help will be greatly appreciated. I found a solution to my problem: by replacing: Code: <select name=\"race\" onchange=\"document.getElementById('ExtraInfo').firstChild.nodeValue = this.options[this.selectedIndex].extrainfo\">
with this: Code: <select name=\"race\" onchange=\"document.getElementById('ExtraInfo').firstChild.nodeValue = this.options[this.selectedIndex].getAttribute('extrainfo')\">
Hi all, I am working on code to wrap BBCodes around a user selection, then leave the selection selected for possibly adding more BBCodes around the same selection. My problem is that there seems to be several different ways to do it and I can't figure out which one is "the best". Now, I can't use the "standard" way of doing this because I am working with TinyMCE. I know there are countless examples on how to do this with textareas... that is NOT what I need. TinyMCE can give me a selection RANGE, a selection NODE or a selection OBJECT. Note that if I use TinyMCE's range, it internally "normalizes" the range to be a standard W3C range, regardless of browser. I've created a new range, extracted the selection from the user's range, created elements for the open and close BBCode, inserted the elements into the range and finally set the user's selection to the new range. Works fine. I also tried taking the selection node (which is an element), then simply used "innerHTML" to add the opening and closing tags, then set the node to the modified node. Works fine. I've also used the editor's built in "selection.getContent()" and "selection.setContent()" calls and THIS also works. I've even tried using the DOM "surroundContents()" function, then used a regex to change the < and > into [ and ]. Freaky... but that works too. So, my dilemma is... which method should I use??? To recap, here's what I want (blue represents selected text): This is a test sentence. (user selected some text) This [bbcode] is a test [/bbcode] sentence. (text is wrapped and remains selected). This [bbcode][newcode] is a test [/newcode][/bbcode] sentence. (user clicked another bbcode button). If no text is selected, then simply the open and close tags are inserted, with the cursor blinking in between them.... [bbcode] | [/bbcode] (pipe symbol represents the cursor) Any guidance will be greatly appreciated! -- Roger I have 2 textareas, 1 which will be vissible, another that will be hidden. I have a function that mirrors (not in reversed lettering) the first textarea's input to the second. Code: function copy_data(val){
var messageText = document.getElementById(val.id).value
document.getElementById('message').innerHTML = messageText;
}
So that copies from : <textarea name="text_message" rows="4" id="text_message" style="direction:ltr;" onkeyup="copy_data(this)"></textarea><br/> To: <textarea name="message" rows="4" id="message" style="direction:ltr;"></textarea> Then I have another function which when I select text in the "text_message" textarea will apply a tag to it, however I don't want this tag to be vissible in the "text_message" textarea but rather in the "message" textarea. Code: function formatText(el,tag){
var selectedText = document.selection?document.selection.createRange().text:el.value.substring(el.selectionStart,el.selectionEnd);
if(selectedText!=''){
var newText=''+tag+''+selectedText+''+tag+'';
el.value=el.value.replace(selectedText,newText)
}
}
This effects from this checkbox: <input type="checkbox" id="bold1" name="bold1" onclick="formatText(message,'#28D')" checked="checked" > Could anyone please help me, I think I may have missed something somewhere, because it works if I point it back to "text_message" I want to insert text to a textarea based on the selected text. It should insert tags like the buttons for posting on this form work. Ie: If 'bar' is selected, and I click 'b', then I get: Code: Foo bar frog becomes: Code: Foo <b>bar</b> frog I found some code that works for firefox, but I need it to work in explorer as well. Do you have any ideas or examples how to do this? Here's the code I'm currently using. ( Works right in ff3. In IE7 it appends the tags at the end of the text. I want it to insert based on my selection. ) Usage: Code: <a onclick="insertTags('<b>', '</b>', document.forms.formpost.text);return false;" href="javascript:void(0);">[ Bold ]</a>
insert function: Code: <script type="text/javascript">
// Surrounds the selected text with text1 and text2.
function insertTags(text1, text2, textarea)
{
// Can a text range be created?
if (typeof(textarea.caretPos) != "undefined" && textarea.createTextRange)
{
var caretPos = textarea.caretPos, temp_length = caretPos.text.length;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text1 + caretPos.text + text2 + ' ' : text1 + caretPos.text + text2;
if (temp_length == 0)
{
caretPos.moveStart("character", -text2.length);
caretPos.moveEnd("character", -text2.length);
caretPos.select();
}
else
textarea.focus(caretPos);
}
// Mozilla text range wrap.
else if (typeof(textarea.selectionStart) != "undefined")
{
var begin = textarea.value.substr(0, textarea.selectionStart);
var selection = textarea.value.substr(textarea.selectionStart, textarea.selectionEnd - textarea.selectionStart);
var end = textarea.value.substr(textarea.selectionEnd);
var newCursorPos = textarea.selectionStart;
var scrollPos = textarea.scrollTop;
textarea.value = begin + text1 + selection + text2 + end;
if (textarea.setSelectionRange)
{
if (selection.length == 0)
textarea.setSelectionRange(newCursorPos + text1.length, newCursorPos + text1.length);
else
textarea.setSelectionRange(newCursorPos, newCursorPos + text1.length + selection.length + text2.length);
textarea.focus();
}
textarea.scrollTop = scrollPos;
}
// Just put them on the end, then.
else
{
textarea.value += text1 + text2;
textarea.focus(textarea.value.length - 1);
}
}
</script>
Is there anything out there that allows for a diagonal and vertical text capture in javascript or jQuery? I was not successful in finding anything. I have a game similar to word find that I've developed, but I need to be able to capture text vertically and diagonally. Otherwise, the only solution will be for me to do a by-click basis to capture items on the screen. I found the script below which handles horizontal capturing: Code: <script type="text/javascript">
document.body.style.cursor="url(3DArrow.cur), crosshair" ;
if (!window.Kolich){
Kolich = {};
}
Kolich.Selector = {};
Kolich.Selector.getSelected = function(){
var t = '';
if (window.getSelection){
t = window.getSelection();
}
else if(document.getSelection){
t = document.getSelection();
}
else if(document.selection){
t = document.selection.createRange().text;
}
return t;
}
Kolich.Selector.mouseup = function(){
var st = Kolich.Selector.getSelected();
sel_text=st.replace(/\s/gi,"");
if(st!=''){
alert("You selected:\n"+sel_text);
}
}
$(document).ready(function(){ $(document).bind("mouseup", Kolich.Selector.mouseup);});
</script>
Hi all, I made up a little test program to grab the mouse X and Y coordinates and plan to use it to allow users to resize a window. Anyway, the problem I'm having is that in MSIE-8, the mouse down and movement causes text to be selected (which I don't want). Here's is a screenshot from MSIE: And here is the test program live online: http://three-dog.homelinux.com/mouse/index.htm Notice that the text in the box is selected ... I don't want that to happen. Of course, it works just fine in Firefox, but not MSIE. I would appreciate if someone can tell me how to fix this (and if possible look at my code and see if I'm doing it right - I'm not very skilled at events yet). Thank you. -- Roger hello im attempting to display the output of the radio selection into the textbox. For example, if the user selects 0-15 then display "Your age group is 0-15 years" in the text area. i get the basic logic. i just dont understand how to display the value in the textbox. heres what i have so far if it will clarify my issue. Code: <html>
<head>
<title>lab 8</title>
<script language="javascript">
function textbox()
{
var i;
for(i = 0; i < form1.agegroup.length; i++)
{
if (form1.agegroup[i].checked)
alert("you picked " + form1.agegroup[i].value);
}
}
</script>
</head>
<body>
What is your age group?<br>
<form name="form1">
<input type="radio" name="agegroup" value="0-15" checked>0-15<br>
<input type="radio" name="agegroup" value="16 to 20">16 to 20<br>
<input type="radio" name="agegroup" value="21 to 25">21 to 25<br>
<input type="radio" name="agegroup" value="26 to 35">26 to 3<br>
<input type="radio" name="agegroup" value="36 and up">36 and up<br>
<input type="button" value="submit" onclick="textbox();">
<form name="form2"><textarea rows ="2">
</textarea>
</body>
</html>
btw i know the alert part is wrong. its there because im taking the code i previously had and changing it to display in a textbox instead of an alert. thanks Hi all, Could someone please tell me how to properly add some text content before and after a user's selection? I am working with the TinyMCE editor, and I can get the following from it: * User's selection as a W3C compatible range * User's selection as a browser selection object * User's selection as a node (element) that encompasses the user's selection I also need the user's selection to remain selected after being wrapped. I've looked all over the web and could find nothing (except running into my OWN previous questions about this). Here's an example of what I'm trying to do: First line is original text, second line a part is selected, third line the selection is wrapped and the selection remains selected. I will greatly appreciate some help here. I've been asking everywhere and nobody seems to know (or they don't bother to answer). Thanks! -- Roger Hello, Is there anyway to prevent images, words, divisions, etc from being selected? Also if something is selected is there a way to deselect? Thanks! As of right now I have a code that will work in IE but wont work in FireFox...go figure. Basically what I want to have happen is when you type in an area code it will provide an output in a predetermined area of the page. For Example: Input- 512 Output - Austin, TX The code that I have doesn't work with firefox and I was just wondering if there was a code that would allow that to happen. Thanks! Hi all, I have been struggling on a bit of code for a while now. I need to populate a second drop down list (Region) based upon the selection of the first (County). I have found a piece of code that works on its own and have adapted to suit my needs - see below. However, when I drop it into my main page the javascript is not working. It's because of the formObject but I just don't know enough to resolve this! Furthermore, I need the textboxes the user has already completed in the form to retain their value once the javascript kicks in as the completed form will submit to a database. This piece of code is working well . . . . Code: <?php
$link = mysql_connect('myhost', 'myusername', 'mypassword') or die('Could not connect: ' . mysql_error());
mysql_select_db('mydatabase') or die('Could not select database');
if(isset($_GET["County"]) && is_numeric($_GET["County"]))
{
$County = $_GET["County"];
}
if(isset($_GET["Region"]) && is_numeric($_GET["Region"]))
{
$Region = $_GET["Region"];
}
?>
<script language="JavaScript">
function autoSubmit()
{
var formObject = document.forms['theForm'];
formObject.submit();
}
</script>
<form name="theForm" method="get">
<!-- County SELECTION BASED ON city VALUE -->
<?php
?>
<select name="County" onChange="autoSubmit();">
<option value=''</option>
<?php
//POPULATE DROP DOWN MENU WITH COUNTRIES FROM A GIVEN city
$sql = "SELECT * FROM county_regions";
$counties = mysql_query($sql,$link);
while($row = mysql_fetch_array($counties))
{
echo ("<option value=\"$row[CountyID]\" " . ($County == $row["CountyID"]? " selected" : "") . ">$row[County]</option>");
}
?>
</select>
<?php
?>
<br><br>
<?php
if($County!= null && is_numeric($County))
{
?>
<select name="Region" onChange="autoSubmit();">
<?php
//POPULATE DROP DOWN MENU WITH RegionS FROM A GIVEN city, County
$sql = "SELECT * FROM county_regions WHERE CountyID = $County ";
$Regions = mysql_query($sql,$link);
while($row = mysql_fetch_array($Regions))
{
echo ("<option value=\"$row[CountyID]\" " . ($Region == $row["CountyID"]? " selected" : "") . ">$row[Region]</option>");
}
?>
</select>
<?php
}
?>
What follows is my form where the javascript is not working - edited quite a bit to save on space! Code:
<head>
<script language="JavaScript">
function autoSubmit()
{
var formObject = document.forms['subform'];
formObject.submit();
}
</script>
</head>
<form enctype="multipart/form-data" method="post" action="add_attraction01.php" FORM NAME="FormName">
<input type="hidden" name="MAX_FILE_SIZE" value="32768" />
<label for="Business_name">Business Name</label>
<input type="text" size="60" STYLE="color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px; background-color: #72A4D2;"
<id="Business_name" name="Business_name" maxlength=60/><font size="1" face="arial" color="red">Required field</font><br />
<label for="StreetAddress">Address</label>
<input type="text" size="60" rows="2" id="StreetAddress" name="StreetAddress" maxlength=120/><font size="1" face="arial" color="red">Required field</font><br />
<label for="Town">Town</label> <input type="text" size="25" id="Town" name="Town" maxlength=25/><font size="1" face="arial" color="red">Required field</font><br />
<?php
$link = mysql_connect('myhost', 'myusername', 'mypassword') or die('Could not connect: ' . mysql_error());
mysql_select_db('mydatabase') or die('Could not select database');
if(isset($_GET["County"]) && is_numeric($_GET["County"]))
{
$County = $_GET["County"];
}
if(isset($_GET["Region"]) && is_numeric($_GET["Region"]))
{
$Region = $_GET["Region"];
}
?>
<form name = "subform" method="get">
<select name="County" onChange="autoSubmit();">
<option value=''</option>
<?php
$sql = "SELECT * FROM county_regions";
$counties = mysql_query($sql,$link);
while($row = mysql_fetch_array($counties))
{
echo ("<option value=\"$row[CountyID]\" " . ($County == $row["CountyID"]? " selected" : "") . ">$row[County]</option>");
}
?>
</select>
<?php
?>
<br><br>
<?php
if($County!= null && is_numeric($County))
{
?>
<select name="Region" onChange="autoSubmit();">
<?php
$sql = "SELECT * FROM county_regions WHERE CountyID = $County ";
$Regions = mysql_query($sql,$link);
while($row = mysql_fetch_array($Regions))
{
echo ("<option value=\"$row[CountyID]\" " . ($Region == $row["CountyID"]? " selected" : "") . ">$row[Region]</option>");
}
?>
</select>
<?php
}
?>
<input type="text" size="20"id="Tel_No" name="Tel_No" maxlength=20 onkeypress="return isNumberKey(event)"/><font size="1" face="arial" color="red">Required field</font><br />
<br/>
<input type="submit" value="Submit your attraction" name="submit" onclick="return BothFieldsIdenticalCaseSensitive();"/>
</form>
</body>
</html>
It's probably obvious to you guys!! Thanks in advance for your help. Hi, I have a form with 9 text fields and a text area. What I want to do is replace the text in the text area depending on how many fields contain text. For example my text boxes are named 1 to 9, if the user enters text in the first five boxes I want the text area to auto fill with 'you have selected boxes 1 to 5' if the user selects all nine it will say 'you have selected 1 to 9', therefore, the user must complete the text boxes in order. I have it working with an onchange event but i have a button on the form to also auto fill the text boxes and it does not work if this is clicked. Any help would be appreciated! Hi all, Thanks for reading. I'm having an issue trying to accomplish the following - I have a text field (field1) already displayed on the HTML page. However, there's a link where you can add additional text fields to the page as well. When the link is clicked, the second text field is added successfully (field2), and when the link is clicked again, the third text field (field3) is added successfully. However, the third field does not add itself to the page, and the text for anything greater than a third field also isn't displayed after. This obviously means that my "fields" variable is not working right, so I'm wondering, would anyone be able to assist me to help me get that variable processing correctly? Code: <script language="javascript">
fields = 1;
function addMore() {
if (fields = 1) {
document.getElementById('addedMore').innerHTML = "<input type='text' name='field2' size='25' /> <span>Field 2.</span>";
fields = 2;
} else if (fields = 2) {
document.getElementById('addedMore').innerHTML = "<input type='text' name='field3' size='25' /> <span>Field 3.</span>";
fields = 3;
} else {
document.getElementById('addedMore').innerHTML = "Only 3 fields are allowed.";
document.form.add.disabled=true;
}
}
</script>
Here is the code in my HTML - Code: <input type="text" name="field1" size="25" /> <span>Field 1.</span> <div id="addedMore"></div> <p class="addMore"><form name="add"><a onclick="addMore()">Add another field.</a></form></p> Thank you very much. |
|||||||