I want to make a text to show and hide inside an input box I made.
I know that it's supposed to be like this:
onmouseover=this.style.display="block";
onmouseout=this.style.display="none";
I just don't know where to put it. Should I put it in the <input>?
Here is my HTML code:
<html>
<head>
<link rel="stylesheet" href="CSS.css"/>
<script src="JavaScript.js"></script>
</head>
<body onload= "load();">
<span id="imvite">Invite:</span>
<input /><br></br>
<span id="time">Time:</span>
<input /><br></br>
<span id="place">Place:</span>
<input /><br></br>
</body>
</html>
When I wrote it after the <input> the text was showing all the time, and it was not even in the textbox.
Like this:
<span id="imvite">Invite:</span>
<input /><br></br>
<span id="time">Time:</span>
<input /><br></br>
<span id="place">Place:</span>
<input onmouseover=this.style.display="block"; my text here />
How can I make a text to appear and disappear inside my textbox with those functions?
I hope I'm clear, thanks for the help.
Try this:
<input
onmouseover="this.value=this.getAttribute('data-value');"
data-value="text"
onmouseout="this.value='';"
/>
Is this what you are trying to do?
Fiddle: http://jsfiddle.net/AtheistP3ace/8nL9gr1h/
HTML:
<input onmouseover="this.value='my text here';" onmouseout="this.value='';" />
<input
onmouseover="this.value=this.getAttribute('data-value');"
data-value="text"
onmouseout="this.value='';"
/>
Works, sort of, the problem is that when you mouse out, anything you typed is blanked and when you mouse over again, it just displays text. Another answer (which may not work if you want everything to be contained in the one HTML Document is to add a Class to you inputs and give it a :hover in a CSS file and link that file in the Head of your HTML, putting any changes to the styling in your CSS.
Related
For some reason, this simple bit of code isn't ticking the checkbox:
<!DOCTYPE html>
<html>
<body>
<p>Automatically tick the box</p>
<form>
<div id='checkingTheBox'>
<div class='someValue'>
<input type="checkbox" name="checkingTheBox">
</div>
</div>
</form>
<script type="text/javascript">
document.getElementById("checkingTheBox").click();
</script>
</body>
</html>
However, when removing the div tags, it works fine. Is there any reason why this isn't working as it's shown, and any advice for getting the javascript to click the element successfully without changing HTML structure?
Edit: I tried using id instead of name inside the input tag. That didn't work either.
You cannot have two or more elements on the page with the same id. The id tag should be unique. Also you cannot use the name tag as a id tag. It is not the same. Here's the code example which works as you wanted to:
<!DOCTYPE html>
<html>
<body>
<p>Automatically tick the box</p>
<form>
<div>
<div class='someValue'>
<input type="checkbox" id="checkingTheBox">
</div>
</div>
</form>
<script type="text/javascript">
document.getElementById("checkingTheBox").click();
</script>
</body>
</html>
EDIT:
It works but it doesn't make any sense to do that. You can just use a simple checked tag in your checkbox to have it to be checked by default. Here's an example:
<input type="checkbox" id="checkingTheBox" checked>
you are selecting the div and want to click function on it inner child so try this script that will select the inner child from your selected this and call click function on that child
const div = document.getElementById('checkingTheBox');
div.firstElementChild.firstElementChild.click();
Did lots of searching on here and found plenty of people with similar questions, but every 'solution' I have found fails to work in my case. I could be missing something simple, or it may have to do with our HTML. Basically, I want our text field to check it's corresponding radio button should someone enter a value there.
Here is a JSFiddle with what I want working, but when I put host it on a server for testing I don't get the same result.
JSFiddle
http://jsfiddle.net/p8kvQ/39/
HTML
<div>
<input type="radio" name="UnitPrice1" id="UnitPrice1" value="47" checked="checked" />
<label for="UnitPrice1">$47</label>
</div>
<div>
<input type="radio" name="UnitPrice1" id="UnitPrice2" value="Other" />
<label for="UnitPrice2">Other</label>
<input class="-input-width-auto" name="Other1" type="number" id="Other1" />
</div>
JS
$('#Other1').click(function(){
$('#UnitPrice2').trigger('click');
});
I DO have "http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" defined in our HTML header and I've tried adding the code by defining its source file, but still no luck.
Any help would be great.
Your JS needs to be inside a document.ready. When the code is run, the dom element is not available, there for your click listener can not be attached it it.
$( document ).ready(function() {
$('#Other1').click(function(){
$('#UnitPrice2').trigger('click');
});
});
(JSFiddle does this for you because you have the following setting: http://screencast.com/t/5WUC33diHpTb)
I would like to have a button to the right of a textbox which when clicked would populate the textbox with a message.
I am assuming I can accomplish this with Javascript but the "onclick" method doesn't seem to work for me. I am probably doing it wrong.
Using JavaScript and HTML :
I am guessing what you need is, may be as follow:
<!DOCTYPE html>
<html>
<head>
<script>
function ButtonClick_Test()
{
document.getElementById("result").value= ' your text here';
}
</script>
</head>
<body>
<form>
Click Here:<br/>
<input type="button" value="Click Here" name="no" onclick="ButtonClick_Test()">
<input type="text" id="result" size="20">
</form>
</body>
</html>
Assuming you are using jQuery(http://jquery.com/):
$('#buttonID').click(function() {
$('#textareaID').val('Your text goes here');
}
I have this simple HTML file that is to be displayed in a UIWebView.
<html>
<body>
<p>
<input name='search' type='search' placeholder="Input type is search" />
</body>
</html>
Here is the screenshot when I clicked the input box.
How to change the Return button to 'Search' like Google page does?
I found a simple solution. Just wrap the input with form tag so the HTML looks like this.
<html>
<body>
<p>
<form>
<input name='search' type='search' placeholder="Input type is search" />
</form>
</body>
</html>
And now the keyboard looks like
Looking in the reference: Text Programming Guide for iOS and I can see that the type search isn't an option, so I think that Safari handle that with a different way. Maybe with a custom inputview. Take a look in my answer to do that.
You have to select the textfield & in identity inspector you select search shown in pic below :
When my JSP page gets loaded, the button (actually an image button with onfocus property) gets focused. So, on pressing enter it gets clicked. It is a small, part of a bigger problem. How can I make the button lose focus when page is loaded?
<html>
<head>
</head>
<body>
<div onkeypress =handleEnter()>
name <input type="text" src='Create.gif' >
</br>
<input type="image" src='Create.gif' onclick="alert('not done')">
<input type="image" src='Create.gif' onclick="alert('done')">
</div>
</body>
<script>
function handleEnter()
{
if(window.event.keyCode==13)
{
alert('nothing');
event.cancelBubble=true;
}
}
</script>
</html>
Both the alert box for nothing and not done has been shown.
You can use the autofocus HTML attribute (specification reference) to automatically focus a different element on page load. I'm not sure how this would get applied with JSP, however in pure HTML this would be something along the lines of:
<button>My Button</button>
<button autofocus>My Other Button</button>
Here's a JSFiddle demo.
I would modify this line :
<input type="text" src='Create.gif' >
to
<input type="text" id="textbox" src='Create.gif' >
<script>
//$('#textbox').focus() //If your using jQuery
document.getElementById('textbox').focus()
</script>
This would shift the focus to the text box rather than the image button
Give your textbox an id and use that id to set the focus to that element.
document.getElementById('textbox').focus()