So I've got a problem.
I've created a text box like that:
<input type="text" id="search" name="search" class="myText" value="Search for a keyword" onclick="value=''"/>
My problem basically is that after I press the text box to write a text of my own, and then press some other place on the screen, the value I set at start (Search for a keyword) will not be displayed once again.
I've tried everything. How do I make it display again once I've pressed some other place on the screen?
Get rid of the onclick="value=''
You are basically saying, empty the box whenever I click on it.
If you can use html5, you can use:
<input type="text" id="search" name="search" class="myText" placeholder="Search for a keyword" />
And you can style it as well:
<style type="text/css">
::-moz-placeholder {color:#ddd;}
::-webkit-input-placeholder {color:#ddd;}
:-ms-input-placeholder {color:#ddd;}
</style>
You should use the placeholder attribute :
Example :
<input name="Email" type="text" id="Email" value="email#abc.com" placeholder="Enter your mail" />
Related
I'm struggling to include an icon as a placeholder in an input form alongside a text
<input type="email" placeholder=" src="image source" your email">
I dont believe its possible to put an image inside but its possible to put a unicode in it. Do you mean like this??
<input type="email" placeholder=" ✉ your email" >
I have a problem with the navigation arrows on Safari on the iphone when filling in a web form.
When the form inputs initially display off the bottom of the screen when you click on the top input the arrows don't seem to work as I would expect. The arrows only navigate through the visible fields. I'm not sure if this is the expected behaviour.
The buttons I'm talking about are shown below.
This is a sample html form that shows the problem on an iPhone 7 with iOS 14.7.1.
I've added some minimal styling to show the problem.
If you select the top input while the other inputs are off the bottom of the screen you can't navigate down the form using the arrow. If you scroll down first and then select one of the inputs depending on which input and where you scroll to you can sometimes navigate through the whole form.
Is there any way to get the arrows to navigate consistently through the form as it is currently displayed or is this just an iPhone "feature"? My real form is more complex than this so ideally I'd like a more generic solution - I have been able to navigate through simpler forms.
<body>
<h1 style="margin: 200px 20px 200px 20px;">Heading</h1>
<form style="display:flex; flex-direction:column;">
<label for="b3-InputAgreementnumber">Agreement number</label>
<input required="" type="text"
autocomplete="off" returnkeytype="next"
keyboardtype="number-pad" id="b3-InputAgreementnumber" >
<label for="b3-InputEmail">Email</label>
<input required="" type="email"
maxlength="60" autocomplete="new-password" returnkeytype="next"
id="b3-InputEmail" >
<label for="b3-InputConfirmationEmail">Confirm Email</label>
<input required="" type="email"
maxlength="60" autocomplete="new-password" returnkeytype="next"
id="b3-InputConfirmationEmail">
<label for="b3-InputSurname">Surname</label>
<input required="" type="text"
maxlength="30" autocomplete="off" returnkeytype="next"
id="b3-InputSurname" >
<label for="b3-InputDateofbirth">Date of birth</label>
<input required="" type="text" placeholder="DD/MM/YYYY" autocomplete="off"
returnkeytype="next" id="b3-InputDateofbirth">
<label for="b3-InputPostcode">Enter your postcode</label>
<input required=""
type="text" maxlength="10" autocomplete="new-password"
returnkeytype="next" id="b3-InputPostcode">
<div>
<button type="submit">Continue</button>
<button type="button">Cancel</button>
</div>
</form>
</body>
I've not been able to find a solution to this as yet but for now we've decided to disable the arrow keys on this form using a technique based on this question's answer IOS disable the keyboard tab arrows.
For iPhone we set all the input fields to readonly and then on focus we set the focused input to read/write using javascript.
It's not an answer but is a reasonable workaround for my use case.
I would like to change watermark text and pup-up text on my search bar. I would like to do it with some CCS.
I know that it not recommended but I think that this is the fastest way.
I have readen How can I replace text with CSS? and How to use CSS to replace or change text? but my case is more complicated.
I tried:
input.search-field.placeholdit.watermark span{
display:none !important;
}
input.search-field.placeholdit.watermark:after{
content: 'TEXT'!important;
}
And some other combinations with span.screen-reader-text, search-wrapper, search-field.placeholdit. The only thing which I achived was earasing searchbox window.
Search box looks like on image bellow - I would like to change "Search ..." and "Search for:" texts:
Search box code:
<div class="search-wrapper">
<form role="search" method="get" class="search-form" action="my.website.com">
<label>
<span class="screen-reader-text">Search for:</span>
<input type="search" class="search-field placeholdit" value name="s" title="Search for:">
</label>
<input type="submit" class="search-submit" value="Search">
</form>
</div>
If there are better ways to change it, I would like to hear it. Beginnings are rough but I would like to learn how to change webpages properly.
Don't use CSS for this. Just change the "placeholder" and "title" attributes in your HTML:
<input type="search" class="search-field" value="" name="s" placeholder="Search" title="Search for:">
You should fix your "value" attribute too.
below my code i need it in the same width and height but with multiple lines "start from the first line" and when reached end of the line go to the new line and 120 characters only and as i made it with "Enter text message" hide when you click to right but i need it with gray color.
instead of values u can use this option
Placeholder="enter text message"
Use the placeholder attribute in a textarea tag. Thats what you are looking for
<form action="demo_form.asp">
<input type="text" name="fname" placeholder="First name"><br>
<textarea type="text" placeholder="Enter text message" ></textarea>
<input type="submit" value="Submit">
</form>
Use a textarea with maxlength and placeholder attribtues (html5).
Add resize:none to your css.
Do not forget to replace maxlength 10 by 120, I used 10 to test quicker :)
You will reach your goal.
DEMO
<textarea maxlength="10" style="width:300px; height:70px" name="tb" type="text" placeholder="Enter text message" ></textarea>
use text area
<textarea rows="4" cols="50" Placeholder="enter text message">
</textarea>
Text Area allows you to enter multiple line
<form method='POST' action="some action">
<span>
<input id="foo" type="password" value="Enter Password"/>
<input type="submit" class="go-btn" id="go-button" value="" />
</span>
</form>
This is the HTML form I am using. In IE when I hit the enter key It will open a small window to which says to download something. But When I click the submit button It works fine.
BTW every thing is working fine with Mozilla and Chrome.
Try giving a name to your password input:
<input id="foo" type="password" name="password" value="Enter Password" />
action="some action"
Is most likely your problem. Change this to the page that you want it to go to. (It's trying to send the data to the page "some action" which is causing it to break)