Solved

input box edit in html and javascript

Posted on 2010-11-11
13
669 Views
Last Modified: 2012-05-10
Dear Expert,

First time, When I  create input box, and type production No, for example, 666666 and then
 redirect  other new webpage according to input box's input into second frame  in the same IE window. My question is  When I type second times, for example, 1213458, I need click the input box first  and then    backspace the first edit in the input box like 6666666 until empty box and then type seond time eidt  like 1213458. IS there any way in html or javascript  can let the input box edit without need to
backspace to erase previous edit.  Like when mouse clicking input box area and then automatically erase the input box's previous edit . That will help to be user friendly feature

Second question, how to highligh or give background color for   the input box 's text value in the input box when mouse is clicking

Please advise

Duncan


<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Developer Studio">
<META HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1">
<TITLE>Document Title</TITLE>
<script>
function formSubmit(frm)
{
      document.getElementById("frame1").src="http://www.mywebsite.com/"+frm.text1.value+".htm";
      return false;
}

</script>

</HEAD>
<body>
<form onsubmit="return formSubmit(this)">
<input type="text" name="text1">
<input type="submit" name="submit">
</form>
<iframe width="600" border="0px" id="frame1">
</body>
</HTML>
 
0
Comment
Question by:duncanb7
  • 9
  • 2
13 Comments
 
LVL 10

Accepted Solution

by:
TiberiuGal earned 250 total points
ID: 34115851
HI,
here's a sample code

<style>
.highlighted { background-color:red; }
</style>

<input type="text" name="mytextbox" 
    onclick="this.value=''; this.className='highlighted'" 
    onblur="if(this.value=='')this.value=this.defaultValue; this.className=''" />

Open in new window

0
 
LVL 13

Author Comment

by:duncanb7
ID: 34116174
It works fine and I don't want to seperate it to another new thread fi like

What I want is that  when user click , erase previouse one and then new edit and then enter  entery for second edit
and then new edit without click and then enter for third , and then new eidit wihout clikc and then enter for forth.

I thought the highlight input box will do the above for me, Actullay just hight the box.


So user is just only one click inputbox area  and then input new edit and entry key for  limit times to web search
without mouse click many times once it click once

Please Advise

Duncan
0
 
LVL 13

Author Comment

by:duncanb7
ID: 34116219
Sorry typing mistake, please read it again
It works fine and I don't want to seperate it to another new thread if you  like

What I want is that  when user click , erase previouse one and then new edit and then enter  entery for second edit
and then erase second when new edit without click and then enter for third , and then erase thrid when new eidit
without click and then enter for forth.

I thought the highlight input box will do the above operation for me, Actually just hight the box.


Most likely  user is just to want  only one click inputbox area  and then input new edit and entry key for  limit times to web search
without mouse click many times once it click once in the input box

Please Advise

Duncan
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 13

Author Comment

by:duncanb7
ID: 34116242
Sorry again typing mistake, please read it again
It works fine and I don't want to seperate it to another new thread if you  like

What I want is that  when user click , erase previous one and then new edit and then enter  for second edit
and then erase second edit  when new edit without click and then enter for third , and then erase third when new edit
without click and then enter for forth.

I thought the highlight input box will do the above operation for me, Actually just hightlight the input  box.


Most likely  user is just to want  only one click inputbox area  and then input new edit and entry key for  limit times to web search
without mouse click many times once it click once in the input box

Please Advise

Duncan
0
 
LVL 13

Author Comment

by:duncanb7
ID: 34116260
If you don't understand, I can explain it more and in detail.Anyway thanks for your help first
0
 
LVL 13

Author Comment

by:duncanb7
ID: 34116918
Do you tink I use onkeydown in Javascript that will help
to erase the previous value once the previous webpage search is done so
it is not neccessary the user to click input box again since it is done by onkeydonw
detecting the enter key of "13"

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing Input Box</title>

<TITLE>Document Title</TITLE>
<script>
function formSubmit(frm)
{
      document.getElementById("frame1").src="http://www.e-hftrade.com/"+frm.text1.value+".htm";
onkeydown="if (event.keyCode==13) {frm.text1.value=''}"
      return false;
}

</script>

</HEAD>
<body>

<style>
.highlighted { background-color:white; }
</style>

<form onsubmit="return formSubmit(this)">
<input type="text" name="text1" value="0000" onclick="this.value=''; this.className='highlighted'"
    onblur="if(this.value=='')this.value=this.defaultValue; this.className=''"  />
<input type="submit" name="submit" >
</form>
<iframe height="700" width="1400" scrolling="no" border="0px" id="frame1" src="http://www.website.com/index.htm">
</body>
0
 
LVL 14

Expert Comment

by:sam2912
ID: 34117522
TS, you are trying to link multiple questions in this thread. Plus, it is worth lower than-average points. It is highly recommended you split this up.
0
 
LVL 13

Author Comment

by:duncanb7
ID: 34119209
Dear TiberiuGal and sam2912,

I will delete this thread since I will make new thread and increase point of the thread and
write it cleary for the remining question. And sorry, this thread and code has a lot of typing
error and not clear enough. Please switch to the new thread and Advise at
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_26610335.html
Thanks

Duncan
0
 
LVL 10

Expert Comment

by:TiberiuGal
ID: 34119223
Hi,
This thread already got answered, so there's no reason moving it.
Just create a new thread for the remaining questions.
0
 
LVL 13

Author Comment

by:duncanb7
ID: 34119436
Anyway, ii ncrease the point , please reply it for the new thread and score it for you 500 including this answer in this thread

0
 
LVL 13

Author Comment

by:duncanb7
ID: 34119442
Please help and advise
0
 
LVL 13

Author Closing Comment

by:duncanb7
ID: 34127148
Thanks for your reply
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

789 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