The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V  1 2 >  
Reply to this topicStart new topic
> End of cursor for input
rhr
post Oct 27 2013, 01:31 AM
Post #1


Newbie
*

Group: Members
Posts: 13
Joined: 27-October 13
Member No.: 19,894



Hi Guys,
I am first time here

I tired resrech website, nothing...

I need end of cursor blink

CODE

<input type = "text" value = "Hello" name = "name1" autofocus >


it is snow |Hello but I want end of blink cursor, Hello|

How I fix it? HTML, CSS or/and Javascript, it is OK

any idea?

RHR
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 27 2013, 05:26 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



It would be JavaScript. I think this solution looks pretty straightforward.
http://stackoverflow.com/a/2345915
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rhr
post Oct 27 2013, 03:17 PM
Post #3


Newbie
*

Group: Members
Posts: 13
Joined: 27-October 13
Member No.: 19,894



you give me link, it is same me before, not work, I dont' understand, maybe they are old FF3 and IE7

QUOTE(pandy @ Oct 27 2013, 03:26 AM) *

It would be JavaScript. I think this solution looks pretty straightforward.
http://stackoverflow.com/a/2345915

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Oct 27 2013, 03:20 PM
Post #4


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Pandys link works fine for me.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 27 2013, 05:12 PM
Post #5


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(rhr @ Oct 27 2013, 09:17 PM) *

not work, I dont' understand, maybe they are old FF3 and IE7

That sounds like the first reply. Use the one further down instead:

CODE
var input=document.getElementById('input');

input.focus(); //sets focus to element
var val = this.input.value; //store the value of the element
this.input.value = ''; //clear the value of the element
this.input.value = val; //set that value back.


BTW isn't it awful how the OP on http://stackoverflow.com/questions/511088/...2345915#2345915 ask a javascript question, and half of the replies use jQuery? wacko.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 27 2013, 07:54 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Yes, it is and yes, that's the solution I meant. K.I.S.S. - why complicate things when it isn't needed?

Maybe their direct links to posts don't work in all browsers. It looks kind of fancy. Maybe it's jQuery. tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 27 2013, 08:37 PM
Post #7


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Oct 28 2013, 01:54 AM) *

K.I.S.S. -any complicate things when it isn't needed?

I suppose jQuery is all many people know. And by posting jQuery solutions to simple problems it makes it even harder for others to learn real javascript.

QUOTE
Maybe their direct links to posts don't work in all browsers. It looks kind of fancy. Maybe it's jQuery. tongue.gif

The page anchor worked for me (though I may have disabled some of the scripts run on that page). But I first scrolled to the top to read the page's question, then lost track of which reply you had linked to. A pity they don't number replies.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 28 2013, 07:40 AM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Hardly anyone *knows* jQuery and that's the problem when something goes wrong. dry.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jimlongo
post Oct 28 2013, 10:55 AM
Post #9


This is My Life
*******

Group: Members
Posts: 1,128
Joined: 24-August 06
From: t-dot
Member No.: 16



Maybe it's just me (!expert), but usually jquery seems a lot simpler than vanilla javascript.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rhr
post Oct 28 2013, 02:49 PM
Post #10


Newbie
*

Group: Members
Posts: 13
Joined: 27-October 13
Member No.: 19,894



you give me I copy it, below

CODE

<body onload="document.getElementById('userinput').focus();">
<form>
<input id="userinput" onfocus="var val=this.value; this.value=''; this.value= val;"
         class=large type="text" size="10" maxlength="50" value="beans" name="myinput">
</form>
</body>


it is sample, it is working,
but I edit add to popup, not work !!

how I fix without
CODE

<body onload="document.getElementById('userinput').focus();">
??

Please no jQuery, thank you

RHR

This post has been edited by rhr: Oct 28 2013, 03:00 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 28 2013, 03:09 PM
Post #11


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



Which popup? A popup window? In that case, put the onload in the popup page.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 28 2013, 03:13 PM
Post #12


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(jimlongo @ Oct 28 2013, 04:55 PM) *

Maybe it's just me , but usually jquery seems a lot simpler than vanilla javascript.

I guess that's the purpose (not counting the externally loaded library file), but sometimes it's used when ordinary javascript would be much simpler and shorter. But if the user only knows jQuery he has no choice but to bloat his pages.

I'm waiting for the day when Google decides to send ad scripts through the jQuery file they host. wub.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Number2
post Oct 28 2013, 06:42 PM
Post #13


Member
***

Group: Members
Posts: 52
Joined: 13-May 13
Member No.: 19,156



Wow! Never heard of jquery until now... Thanx guys. Looks like enough support for it to justify further investigation at least. How big is the download? Does it run slower than js in general? Reminds me of "TLO" on the C64. "The Last One," as in the last programming language you would ever need - and it worked. Everything was driven by menu selections and the end result was standard C64 BASIC. Wonder if there's a JS version of something like Dreamweaver?

This post has been edited by Number2: Oct 28 2013, 06:47 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rhr
post Oct 28 2013, 09:28 PM
Post #14


Newbie
*

Group: Members
Posts: 13
Joined: 27-October 13
Member No.: 19,894



QUOTE(Christian J @ Oct 28 2013, 01:09 PM) *

Which popup? A popup window? In that case, put the onload in the popup page.


Sure, I show you code for both popup and input

you need save 'dialog10.css'
CODE

#dialog
{
display: none;
top: 25%;
bottom: 25%;
left: 15%;
right: 15%;
width: 70%;
height: 50%;
position: absolute;
z-index: 100;
background: white;
padding: 2px;
font: 10pt tahoma;
text-align: center;
border: 11px solid white
}

#cover
{
display: none;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: gray;3
filter: alpha(Opacity=30);
opacity: 0.3;
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
}


and

HTML / Javascript
CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="dialog10.css" />

<script type="text/javascript">
function PopupCenter(pageURL, title,w,h)
{
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
var targetWin = window.open (pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
}

        function showPopUp(el) {
            var cvr = document.getElementById("cover")
            var dlg = document.getElementById(el)
            cvr.style.display = "block"
            dlg.style.display = "block"
            if (document.body.style.overflow = "hidden") {
                cvr.style.width = "1024"
                cvr.style.height = "100%"
            }
        }
        function closePopUp(el) {
            var cvr = document.getElementById("cover")
            var dlg = document.getElementById(el)
            cvr.style.display = "none"
            dlg.style.display = "none"
            document.body.style.overflowY = "scroll"
        }
    </script>

</head>
<body>

<!-- *** START OF POPUP *** -->
<div id="cover"></div>
<div id="dialog">
<h1><center>
<br>
No work autofocus<br>
and need end of cursor blink<br><br>

(<input type="text" size="40" maxlength="50" Name="test" Value="NEED END OF CURSOR BLINK" autofocus>)

<br><br>

<a href="#" onclick="closePopUp('dialog');">[Close]</a>
<center></h1>
</div>
<!-- *** END OF POPUP *** -->


<!-- *** START OF MESSAGE *** -->
<h1>
<a href="#" onclick="showPopUp('dialog');" >click</a>
<br>
<br><br>

xxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxx

</h1>
<!-- *** END OF MESSAGE *** -->

</body>
</html>


you click "click" and show popup but no work autofocus and end of cursor. if you don't like it, Can you create new both popup and input

RHR
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rhr
post Oct 29 2013, 12:30 AM
Post #15


Newbie
*

Group: Members
Posts: 13
Joined: 27-October 13
Member No.: 19,894



I found and problem!!!

CODE

#dialog
{
/* display: none; */
...
...


autofocus did show on popup but click "close" then again "click", no show autofocus !!!!

RHR


QUOTE(rhr @ Oct 28 2013, 07:28 PM) *

QUOTE(Christian J @ Oct 28 2013, 01:09 PM) *

Which popup? A popup window? In that case, put the onload in the popup page.


Sure, I show you code for both popup and input

you need save 'dialog10.css'
CODE

#dialog
{
display: none;
top: 25%;
bottom: 25%;
left: 15%;
right: 15%;
width: 70%;
height: 50%;
position: absolute;
z-index: 100;
background: white;
padding: 2px;
font: 10pt tahoma;
text-align: center;
border: 11px solid white
}

#cover
{
display: none;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: gray;3
filter: alpha(Opacity=30);
opacity: 0.3;
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
}


and

HTML / Javascript
CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="dialog10.css" />

<script type="text/javascript">
function PopupCenter(pageURL, title,w,h)
{
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
var targetWin = window.open (pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
}

        function showPopUp(el) {
            var cvr = document.getElementById("cover")
            var dlg = document.getElementById(el)
            cvr.style.display = "block"
            dlg.style.display = "block"
            if (document.body.style.overflow = "hidden") {
                cvr.style.width = "1024"
                cvr.style.height = "100%"
            }
        }
        function closePopUp(el) {
            var cvr = document.getElementById("cover")
            var dlg = document.getElementById(el)
            cvr.style.display = "none"
            dlg.style.display = "none"
            document.body.style.overflowY = "scroll"
        }
    </script>

</head>
<body>

<!-- *** START OF POPUP *** -->
<div id="cover"></div>
<div id="dialog">
<h1><center>
<br>
No work autofocus<br>
and need end of cursor blink<br><br>

(<input type="text" size="40" maxlength="50" Name="test" Value="NEED END OF CURSOR BLINK" autofocus>)

<br><br>

<a href="#" onclick="closePopUp('dialog');">[Close]</a>
<center></h1>
</div>
<!-- *** END OF POPUP *** -->


<!-- *** START OF MESSAGE *** -->
<h1>
<a href="#" onclick="showPopUp('dialog');" >click</a>
<br>
<br><br>

xxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxx

</h1>
<!-- *** END OF MESSAGE *** -->

</body>
</html>


you click "click" and show popup but no work autofocus and end of cursor. if you don't like it, Can you create new both popup and input

RHR

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rhr
post Oct 29 2013, 01:19 AM
Post #16


Newbie
*

Group: Members
Posts: 13
Joined: 27-October 13
Member No.: 19,894



final without 'body'

CODE
<input id="userinput" onfocus="var val=this.value; this.value=''; this.value= val;" class=large type="text" size="50" maxlength="100" value="beans" name="myinput">
<script>document.getElementById('userinput').focus();</script>


it is working wihtout body, but I need popup wont' work above code sad.gif
RHR

This post has been edited by rhr: Oct 29 2013, 01:21 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 29 2013, 07:50 AM
Post #17


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



The function showPopUp() doesn't open any popup.

Also, the HTML you posted doesn't look like the popup page, it looks more like the HTML of the popup's parent page.


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rhr
post Oct 29 2013, 03:51 PM
Post #18


Newbie
*

Group: Members
Posts: 13
Joined: 27-October 13
Member No.: 19,894



you are right, forget showPopUp() but any idea another popup with autofocus / input?

RHR

QUOTE(Christian J @ Oct 29 2013, 05:50 AM) *

The function showPopUp() doesn't open any popup.

Also, the HTML you posted doesn't look like the popup page, it looks more like the HTML of the popup's parent page.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 29 2013, 07:20 PM
Post #19


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



Here's how to open a page called example.html in a popup window: http://htmlhelp.com/faq/html/links.html#window-specify

Then just put the INPUT element and cursor script in example.html. You don't really need the onload event, as long as the script appears after the INPUT element:

CODE
<input type="text" id="input" value="foo">

<script type="text/javascript">
var input=document.getElementById('input');

input.focus(); //sets focus to element
var val = input.value; //store the value of the element
input.value = ''; //clear the value of the element
input.value = val; //set that value back.
</script>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rhr
post Oct 30 2013, 08:18 PM
Post #20


Newbie
*

Group: Members
Posts: 13
Joined: 27-October 13
Member No.: 19,894



Thank you but i need import popup with autofocus, but open is not working for autofocus sad.gif

RHR

QUOTE(Christian J @ Oct 29 2013, 05:20 PM) *

Here's how to open a page called example.html in a popup window: http://htmlhelp.com/faq/html/links.html#window-specify

Then just put the INPUT element and cursor script in example.html. You don't really need the onload event, as long as the script appears after the INPUT element:

CODE
<input type="text" id="input" value="foo">

<script type="text/javascript">
var input=document.getElementById('input');

input.focus(); //sets focus to element
var val = input.value; //store the value of the element
input.value = ''; //clear the value of the element
input.value = val; //set that value back.
</script>


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

2 Pages V  1 2 >
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 12:38 AM