[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

blur and unblurring a text box on demand

Posted on 2005-04-19
9
Medium Priority
?
595 Views
Last Modified: 2012-06-27
i want to be able to unblur and blur a text box, if the name i choose from the pull down menu is Steve.


here is my html code

<select name="example" onchange="checkBlur();">
<option value="Sam">Sam</option>
<option value="Mike">Mike</option>
<option value="Sue">Sue</option>
<option value="Steve">Steve</option>
</select>
<input type="text" name="textName" value="" onfocus="this.blur();" readonly="true">



<javascript>

checkBlur()
{
  var nameLabel = window.document.formName.example.options;
  var textLabel = window.document.formName.textName;
 
  if ((nameLabel.length - 1) ==  nameLabel.selectedIndex)
     {
       textLabel.readonly="false";
       textLabel.onfocus = "";
      }
    else
    {
       textLabel.readonly="true";
       textLabel.onfocus = "blur();";
      }
}


is my java script code correct?
0
Comment
Question by:jaxkewl
  • 5
  • 4
9 Comments
 

Author Comment

by:jaxkewl
ID: 13819798
i use both blur and readonly because netscape and IE have problems understanding one or the other. according to a MS website.
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13819891
Here's an example.

The differences from your code is

1) Use the <script> tag and not <javascript>
2) Use the removeAttribute() and setAttribute() to manipulate the readonly attribute. Note the case-sensitive "readOnly"(capital "O").



<form name="formName">
<select name="example" onchange="checkBlur();">
<option value="Sam">Sam</option>
<option value="Mike">Mike</option>
<option value="Sue">Sue</option>
<option value="Steve">Steve</option>
</select>
<script type="text/javascript">

function checkBlur()
{
  var nameLabel = window.document.formName.example.options;
  var textLabel = window.document.formName.textName;
 
  if ((nameLabel.length - 1) ==  nameLabel.selectedIndex)
     {

       textLabel.onfocus = "";
       textLabel.removeAttribute('readOnly');
      }
    else
    {

       textLabel.onfocus = "blur();";
       textLabel.setAttribute('readOnly',true);
      }
}
</script>

<input type="text" name="textName" value="" onfocus="this.blur()" readonly>
</form>
0
 

Author Comment

by:jaxkewl
ID: 13820197
thanks, i will try this and give u the A if it works.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 32

Expert Comment

by:Batalf
ID: 13821975
Did it work?
0
 

Author Comment

by:jaxkewl
ID: 13823070
this works with IE, but not with netscape. it has a problem with blurring back. after i select steve, i am able to type in the text box, but then after i choose another name it will not make it back to readonly. again this is with netscape.

the statement:

textLabel.onfocus = "blur();";

does not blur the textbox back.
0
 

Author Comment

by:jaxkewl
ID: 13823089
also how do you highlight text with javascript?

more specifically, i want this textLabel.value="Highlight this text"; to be highlighted after it is chosen in this IF statement. is there like a textLabel.highlight();?

if ((nameLabel.length - 1) ==  nameLabel.selectedIndex)
     {

       textLabel.onfocus = "";
       textLabel.removeAttribute('readOnly');
       textLabel.value="Highlight this text";
       textLabel.value.highlight; ????????
      }

i will look into this to see if i can answer my own question in the meantime. thanks.
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13823199
Highlight can be done with the select() function.

In this example I have moved the blur() command to a separate function


<form name="formName">
<select name="example" onchange="checkBlur();">
<option value="Sam">Sam</option>
<option value="Mike">Mike</option>
<option value="Sue">Sue</option>
<option value="Steve">Steve</option>
</select>
<script type="text/javascript">

function blurThis(){
      this.blur();      
}

function checkBlur()
{
  var nameLabel = window.document.formName.example.options;
  var textLabel = document.getElementById('textName');
 
  if ((nameLabel.length - 1) ==  nameLabel.selectedIndex)
     {

         textLabel.onfocus="";
       textLabel.removeAttribute('readOnly');
       textLabel.select();
     }
    else
    {
         textLabel.onfocus=blurThis;
       textLabel.setAttribute('readOnly',true);
      }
}
</script>

<input type="text" id="textName" name="textName" value="" onfocus="this.blur()" readonly>
</form>
0
 
LVL 32

Accepted Solution

by:
Batalf earned 500 total points
ID: 13823235
An alternative solution for you could be to just hide and show the select box:

<form name="formName">
<select name="example" onchange="checkBlur();">
<option value="Sam">Sam</option>
<option value="Mike">Mike</option>
<option value="Sue">Sue</option>
<option value="Steve">Steve</option>
</select>
<script type="text/javascript">
function checkBlur()
{
  var nameLabel = window.document.formName.example.options;
  var textLabel = window.document.formName.textName;
 
  if ((nameLabel.length - 1) ==  nameLabel.selectedIndex) {            
         textLabel.style.display='inline';
     }
    else
    {
         textLabel.style.display='none';
      }
}
</script>

<input style="display:none" type="text" id="textName" name="textName" value="">
</form>
0
 

Author Comment

by:jaxkewl
ID: 13823424
thanks everything is working AOK.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question