Solved

input box edit in html and javascript

Posted on 2010-11-11
13
664 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 13

Author Comment

by:duncanb7
Comment Utility
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
Comment Utility
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
Comment Utility
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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 14

Expert Comment

by:sam2912
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Please help and advise
0
 
LVL 13

Author Closing Comment

by:duncanb7
Comment Utility
Thanks for your reply
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

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…
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

762 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

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now