?
Solved

input box edit in html and javascript

Posted on 2010-11-11
13
Medium Priority
?
677 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 2
13 Comments
 
LVL 10

Accepted Solution

by:
TiberiuGal earned 1000 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
WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

 
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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
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)
Suggested Courses

777 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