|
JavaScript - Highlighting Multiple Words In A Textbox
Hello,
I have a regular expression that returns multiple matches. For e.g. If the user types a string "980ee,34223,werw" in a textbox, the regular expression match returns "ee" and "werw". I would like to highlight both "ee" and "werw" in the textbox. How can I achieve this? Thank you. Similar TutorialsI have a Text Box which i wish to Place Words into it, once i click the Button it should Split the Words into Characters E.G I enter Before in Text box it should Should B E F O R E Code:
<script language="javascript">
function getTag(){
var string = document.getElementById("tag");
var array = string.getElementById("tag");
var finishedArray = [];
for (var i = 0, il = array.length; i < il; i++) {
var temp = array[i].getElementById(",");
for (var j, jl = temp.length; i < jl; j++) {
finishedArray.push(temp[j]);
destLayer = document.getElementById('splitResponse');
destLayer.innerHTML='';
}
}
}
</script>
<h3>Sentence Splitter</h3>
<input name="tag" type="text" id="tag" size="30" autocomplete="off"/>
<button onClick="getTag();" value="Click"/>Click</button>
<div id="splitResponse"></div>
<div class="section"></div>
</div>
Hi all! I'm using a multiselect box on my website, similar to this one: <Select Name="multiselect[]" multiple="multiple"> <option>This is option 1</option> <option>This is option 2</option> <option>This is option 3</option> <option>This is option 4</option> </select> Now I want to set option 1, option 2 and option 3 as selected (highlighted) in javascript. How would I go about doing this? I tried something like this: document.taakform.elements['multiselect[]'].selectedIndex = "1" document.taakform.elements['multiselect[]'].selectedIndex = "2" document.taakform.elements['multiselect[]'].selectedIndex = "3" Of course this doesn't work (else I wouldn't be posting here ), but I hope you catch my drift. Thanks in advance guys (and gals)! I have a cgi script (using perl for database queries) in which I have two select boxes. I am populating the left select box with rows from a database, and then provide buttons for people to move items to the right select box. So far so good, everything works, the move right, move left, and move right all and move left all buttons work, data is always sorted in both lists. My only problem is, when I click the submit button, the follow up program only displays data that was highlighted/selected in the right select box, not all of the data in the right select box. I don't know how to tell the script, via javascript, to highlight everything in the right select box when the submit form button is clicked. I would think i could just call a function via -onClick for the submit button. I could use some help with the function to select all data in that list. I can post code if it is helpful. Thanks, Taylor Store Information to multiple textboxes from database Code: $count=<mysql_num_rows($query1);
for($i=0;$i<mysql_num_rows($query1);$i++)
{
$row1=mysql_fetch_array($query1);
$getval[$i]=$row1[UserId];
Print "<input type=text name='txtbox[]' id='txtbox[]' value='.$getval[$i].'">;
}
then i call a javascript function Print "<script language=javascript>Call_Fun($count)</script>"; The above code store data into textbox and call the js function in .js file Code: function Call_Fun(count)
{
for(var i=0;i<count;i++)
{
alert(document.getElementbyId('txtbox')+i.value);
}
}
But it doesn't retreive values in .js Thankyou all Hi.. I have form and i want to input data using barcode and it will display on textbox and after input on the first textbox the focus will go to next textbox untill it will go on the last textbox and on the last textbox it will automatically save the data's on the database. How is it possible? here is my sample code: Code: <?php
error_reporting(0);
date_default_timezone_set("Asia/Singapore"); //set the time zone
$con = mysql_connect('localhost', 'root','');
if (!$con) {
echo 'failed';
die();
}
mysql_select_db("mes", $con);
?>
<html>
<head>
<script type="text/javascript">
function ini()
{
// Retrieve the code
var code =document.getElementById ("code_read_box1").value;
var code =document.getElementById ("code_read_box2").value;
var code =document.getElementById ("code_read_box3").value;
var code =document.getElementById ("code_read_box4").value;
var code =document.getElementById ("code_read_box5").value;
var code =document.getElementById ("code_read_box6").value;
// Return false to prevent the form to submit
return false;
}
</script>
</head>
<body onLoad="document.barcode.code_read_box1.focus()">
<form name=barcode onsubmit = "return ini()">
<input type="text" id="code_read_box1" value="" /><br/>
<input type="text" id="code_read_box2" value="" /><br/>
<input type="text" id="code_read_box3" value="" /><br/>
<input type="text" id="code_read_box4" value="" /><br/>
<input type="text" id="code_read_box5" value="" /><br/>
<input type="text" id="code_read_box6" value="" /><br/>
</form>
</body>
</html>
Hello. I've been teaching myself HTML and CSS for a while, and now I've moved into the world of Javascript (but I'm still very much a beginner). For practice, I've been building a sample sign up form for a mock website, and I'm having problems with the birthdate section. The idea I had was to have MM, DD, and YYYY be the default values of my 3 textboxes (as an example for users), then set the value to nothing when the box gained focus. That all works fine, but I ran into problems when I tried to write an if statement to set the value back to MM, DD, or YYYY if the value was still nothing when the user clicked away. As it is now it just replaces the text inputted into the textbox (which of course is not good). Any ideas for what the problem might be? Code: <form name="signup" action="javascript:void(0);" method="post">
<table>
<tr>
<td>Date Of Birth:</td>
<td>
<input name="DOBmonth" type="text" value="MM" size="2" style="color: #555555;" onFocus="clearDOBmonth()" onBlur="restoreDOBmonth()" />
<input name="DOBday" type="text" value="DD" size="2" style="color: #555555;" onFocus="clearDOBday()" />
<input name="DOByear" type="text" value="YYYY" size="4" style="color: #555555;" onFocus="clearDOByear()" /></td>
</tr>
<tr>
<td></td>
<td><button name="Submit" type="submit" style="font-size: 1em;">Sign Up</button></td>
</tr>
</table>
</form>
<script type="text/javascript" language="javascript">
<!--
document.signup.DOBmonth.value="MM";
document.signup.DOBday.value="DD";
document.signup.DOByear.value="YYYY";
function clearDOBmonth() { document.signup.DOBmonth.value="";}
function clearDOBday() { document.signup.DOBday.value="";}
function clearDOByear() { document.signup.DOByear.value="";}
function restoreDOBmonth()
{
if ('document.signup.DOBmonth.value = ""')
{
document.signup.DOBmonth.value = "MM";
// alert(document.signup.DOBmonth.value);
}
}
//-->
</script>
Another side question, if I set a variable equal to the value of a textbox, then change the value of the variable, does that also change the value of the textbox? or is the variable no longer associated with the textbox. Example: Code: var a = document.form.textbox.value; a = blue; does document.form.textbox.value = blue? or is var a now completely independent of the textbox value? Thanks! alright, if my TR looks like this... Code: <tr class="colorRow('0',' ');" onmouseover="colorRow('0', 'over');" onmouseout="colorRow('0', 'out');">
<tr class="colorRow('1',' ');" onmouseover="colorRow('1', 'over');" onmouseout="colorRow('1', 'out');">
<tr class="colorRow(' ',' ');" onmouseover="colorRow(' ', 'over');" onmouseout="colorRow(' ', 'out');">
Why does this function not work? Code: function colorRow(serverID, when)
{
if(when == ' ')
{
if(serverID == ' ')
{
className = 'noBG';
}
if(serverID == '1')
{
className = 'rowOdd';
}
if(serverID == '0')
{
className = 'rowEven';
}
}
if(when == 'over')
{
className = 'rowOver';
}
if(when == 'out')
{
if(serverID == '0')
{
className = 'rowEven';
}
if(serverID == '1')
{
className = 'rowOdd';
}
}
}
I am looking for a script that would prevent an image from being highlighted by dragging the mouse. Thank you.
Hey, I have a jQuery script running on my site that makes it so when you click on a thumbnail, a different overflow:hidden div is scrolled to the anchor point that thumbnail was linking to. I want to make it so the thumbnail that you clicked becomes selected (and all over thumbnails become unselected). This could be with a border, a shadow, an image appearing behind it, opacity - basically anything (preferably an image appearing behind it). I'm pretty much a javascript noob, but common sense tells me that this isn't possibly with basic CSS. How do I go about doing this? PS, if you want a clearer picture of what I'm referring to on my site, check http://bit.ly/83ftPF Thanks a ton for your time, I really appreciate it! -Joel I've implemented the Google CSE on my website and it works fine but I'd like to ask if there is a way to highlight the searched words on destination sites using javascript? i.e.: 1. I type into the search form the word I need to find on my website --> 2. I get result site with links to subsites --> 3. After clicking one of the listed links I go back to my website, to certain subsite --> 4. The word I've been searching for is highlighted so I can easily find it. Thanks in advance. I'm trying to implement a syntax highlighter in my program, but jQuery 1.2.6 is giving me problems. This line specifically: Code: parse: [/^(\[) *@?([\w-]+) *([!*$^~=]*) *('?"?)(.*?)\4 *\]/, /^(:)([\w-]+)\("?'?(.*?(\(.*?\))?[^(]*?)"?'?\)/, new RegExp("^([:.#]*)(" + chars + "+)")],
it messes with every javascript editor's syntax highlighting I've tried so far too. It looks like they're declaring a regex pattern without a delimiter. Can anybody make sense of this line? Alright, I'm using a Rooh.It WordPress plugin right now, but I don't like the way they do it, so I want to write my own code to do something similar. I want the user to be able to select the text they want to highlight, and the background color of that text changes to whatever color they have selected. How can I do this in JavaScript? I've spent some time trying to find a decent syntax highlighting javascript that will work in Firefox/Chrome and will work on <textarea> or at least act like a <textarea>. Bespin was working really well until I found out that I can only have 1 bespin div per page unless I use iframes (which wont work with my project) Codepress was really flakey and would sometimes show up as readonly in chrome. Syntax Highlighter doesn't say that it will work with a textarea (and I couldnt get it too) codeMirror also uses iframes. Anyone have some good suggestions? I'm trying to write a function that is similar to the ctrl+f functionality you get in IE, where you have a search string and when you click 'next' the whole string if matched is highlighted by the cursor. This works fine for inputs and text areas using the following code: Code: function setCaretPos(obj, start, end)
{
var range = obj.createTextRange();
range.moveStart('character', start);
range.moveEnd('character', end - obj.value.length);
range.select();
}
But now I need to get it to work for normal text in a text node that is in the HTML/DOM. Is there an equivalent way of making the above method work for text in text nodes? Alternatively is there a way to make the browser (IE) at least focus on some text in a text node? (I could then highlight it with CSS styles). Alright so for my website (I've totally revamped it and what not) I want to make a code highlighter for source code / tutorials I've posted. At the moment I'm just using some css: Code: div.code
{
font:1em "Courier New";
margin: 10px auto 10px auto;
background-color: #FFFFFF;
border: thick solid #555555;
color: #000000;
white-space: pre;
font-size: 12;
}
So the code stays neat and in a box. But what I want to do now is somehow make a small javascript function that scans the text inside the html file etc : Code: <div class="code">float TimerTicksPerSecond = 0; float TimerTicksPerMillisecond = 0; int value = 0; std::string s = "hello world"; </div> and can format it so float and int is blue, "hello world" is red etc. Be a great help if someone can point me in the right direction. As from the javascript I've done myself I can't see it being to hard. I'm just unsure how to scan for text inside like I have above. Cheers Myth. Hello everyone. This a css code in <head>: Code: .pagination{
width: 530px; /*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/
text-align: right;
background-color: white;
padding: 5px 10px;
}
.pagination a{
padding: 0px 5px;
text-decoration: none;
color: #410B38;
font-weight:bold;
font-family:Arial;
background: white;
}
.pagination a:hover, .pagination a.selected{
color: white;
text-decoration: none;
font-weight:bold;
font-family:Arial;
background-color: #410B38;
}
for a div with class=pagination (below) which contains the pagination of mysql data display: Code: <div class="pagination">
<?php
$sql = "SELECT COUNT(id) FROM tablename";
$rs_result = mysql_query($sql,$mysql_connection);
$row = mysql_fetch_row($rs_result);
$total_records = $row[0];
$total_pages = ceil($total_records / 5);
for ($i=1; $i<=$total_pages; $i++) {
echo "<a href='mysqldatadisplay.php?page=".$i."'>".$i."</a>";
};
?>
</div>
I want everytime someone clicks on another number in order to change page, that clicked number to have different style than the other numbers as long as one stays on that page and when one clicks on a different number I want that number to behave in the same way. Someting like highlighting the navigational item that you're on. Thank you very much in advance! hello i've followed this javascript and i'd like to link the text to one of my page.How do i place the ahref tag in the script.Appreciate your help http://www.javascriptkit.com/script/script2/neontext.shtml Hey Basically all i want to do is highlight the pages hyperlink the user is currently on. So when the home page loads, the home page hyperlink is a different colour to the other hyperlinks, and then when another is page is pressed it is that pages hyperlink that is a different colour to the others Code:
// Code for alternating row colors on data tables, but NOT every table.... just ones with classname="altRows"
// Note: rowID comes from the JIT Variable: &&_sflalt
// Note: This function is called in ovject group: *TR in the MLS Syntax File
function stripeRows(rowVar)
{
// Need to create a var for uniquely identifying the highlighted rows
var rowID = 0;
// Begin the checking and writing of the HTML data
if (rowVar == '')
{
var html = "<tr>";
document.writeln(html);
}
else if (rowVar == '0')
{
var html = "<tr class=\"rowEven\" id=\"evenRow"+rowID+"\" onmouseover=\"highlightRow('over', 'evenRow"+rowID+"');\" onmouseout=\"highlightRow('out', evenRow"+rowID+"');\">";
document.writeln(html);
rowID++;
}
else if (rowVar == '1')
{
var html = "<tr class=\"rowOdd\" id=\"oddRow"+rowID+"\" onmouseover=\"highlightRow('over', 'oddRow"+rowID+"');\" onmouseout=\"highlightRow('out', oddRow"+rowID+"');\">";
document.writeln(html);
rowID++;
}
else
{
var alertText = "Something went wrong with alternating row color in datasets - The function broke. Please jot down a note as to what you were doing when this dialogue box poped up, and let American Health Care Software know \n\n\n ATTN: Pat Litke";
parent.showDialog('Broken Function',alertText,'prompt');
}
}
// Function for modifying class attrbutes for row highlighting..
// This function will allows the currently moused-over row to highlight a different color based on its ID
function highlightRow(option, theRowID)
{
var row = document.getElementById(theRowID);
if(option == 'over')
{
row.className = 'rowOver';
}
if(option == 'out')
{
row.className = 'rowEven';
} else if(option == 'in')
{
row.className = 'rowOdd';
} else { }
}
Can someone help? I can't figure out why this isn't working the way that I'm logically seeing it... The alternate rows highlight works fine, but the mouseover and mouseout events fail miserebly... When a page loads, regardless of where i mouse over, only the top two rows color in with the mouseOver color. They also don't revert to original coloring. Where am I going wrong? Note: I apologize if it's something little that I'm missing... I'm still new to js |
|||||||