There is a tooltip when my mouse is over the textbox : "please fill out this field" is there a way too change this text ?
if you hover on this field you can see the massage :
<input type="text" name="yourname" required/>
This could be easily done using the title HTML attribute.
title Attribute
The title attribute belongs to the Global Attribute. It allows to specify extra information about an element. This information is shown as a tooptip text when the mouse moves over the element.
<input type="text" name="yourname" required title="You changed it !!"/>
If its something related to the text showed after validation. For that you could use the function setCustomValidity along with an event Handler .
Here we would use the event Handler oninvalid.
Your code could be written as :
<input type="text" name="yourname" required oninvalid="this.setCustomValidity('Yo! You changed it')" oniput="this.setCustomValidity('Yo! You changed it')" title="test"/>
you can add a title on your input
<input title="test" type="text" name="yourname" required/>
Related
I have these inputs that take the values of a from a in my table when I click on a row. I want to make it so that the user cannot change the input themselves but want to bring values into them when a user clicks a table row. I will be passing these inputs in as a form. I know that when the input is like this:
that it will not be updated. Is there any other way to do it with an input. Is there a different type of tag I can use that can be passed through a form?
Rather than a read-only <input>, I'd go with a combination of a display element and a hidden form element. Something like:
<div id="my-display">This is a value</div>
<input id="my-input" name="my-input" type="hidden" />
And in the code update both:
$('#my-display').text(yourValue);
$('#my-input').val(yourValue);
You can style the display to the user however you like and don't have to worry about whether or not it "de-activates" the form input.
If you really want it to be an inactive input, you can use the same approach:
<input class="my-input" type="text" disabled />
<input class="my-input" type="hidden" name="my-input" />
Which may even save you a line of code here, since both can now use .val():
$('.my-input').val(yourValue);
Try disabled keyword as here
<div id="my-display">This is a value</div>
<input id="my-input" name="my-input" type="text" disabled/>
You can change the value by javascript as below:
document.querySelector('#my-input').value = 'the value you want to enter by javascript';
I want to show placeholder as label when i click the textbox. i did with "required" textboxes.
<input type="text" class="inputText" required>
But how to achieve this without required like:
<input type="text" class="inputText">
I tried https://jsfiddle.net/273ntk5s/3680/
You need to remove the
.user-input-wrp .inputText:not(:focus):valid ~ .floating-label
part of your css because you are apply the "focus" style when the field is ":valid". If it's not required, then it's automatically "valid".
I want a textbox functionality like a gmail login page textbox. Right now I have code like this:
<script>
function inputFocus(i){
if(i.value===i.defaultValue){ i.value=""; i.style.color="#000"; }
}
function inputBlur(i){
if(i.value===""){ i.value=i.defaultValue; i.style.color="#888"; }
}
</script>
<body>
<input type="text" name="firstname" title="First Name" style="color:#888;"
value="First Name" onfocus="inputFocus(this)" onblur="inputBlur(this)" />
...
</body>
The problem with this code is when I select the tetbox, type "First Name" and if I reselect the textbox the text is clearing. And also gmail login page textbox functionality looks great, until I type a letter it shows the transperent text. But I don't know how to implement it.
For the "transparent text" you need to use the placeholder attribute:
<input type="text" name="firstname" ... placeholder="Email">
are you looking for a placeholder ??
If so... you can do like this..
<input type="text" name="somename" id="someid" value="" placeholder="Email">
Placeholder is used to display the text in the text box and will disappear as soon as you start typing..
If you want to delete the "transparent text" once start typing, you can use placeholder attribute of input element
This attribute is introduced in HTML5 to handle this scenario without writing any peice of javascript code
Your html code should look like this
<input type="text" name="firstname" placeholder="First Name"/>
This will also work as desired when you delete your text, as it will reset the transparent text back again.
Also, here is a working example on jsfiddle
I also, encourage you to review new elements and attributes introduced in HTML5, it will save a your time writing a lot of javascript to handle already built in functionalities
I have a text area form like this one:
<input id="sg_0" name="sjalfgefid" type="text" class="letur hvitur" size="8" maxlength="40" value=""></td>
and a Checkbox next to it:
<input type="Checkbox" id="cb0" name="innsent" tegund="val" gildi="eink" value="0" number="0" parents="1" onclick="hakaVid(this)">
I want the checkbox to be filled when some text is written in the text area. And when the user deletes all the text from the textbox, I want the checkbox to update immediately
How can I possibly do this ?
Attach an onKeyUp event handler to the <input> and modify the checkbox's value according to this.value.length.
<input id="sg_0" name="sjalfgefid" type="text" class="letur hvitur"
size="8" maxlength="40" value=""
onkeyup="document.getElementById('cb0').checked = this.value.length > 0;">
Example: http://jsfiddle.net/qG5Cu/
UPDATE You might be interested on using the onInput event handler instead of onkeyup. See this link for more information: Using the oninput event handler with onkeyup/onkeydown as its fallback
I guess you should try with input events, check w3c:
input tag
I'm trying to find a script that will fill a textfield of say an optin form with a text like 'fill in your e-mail address' and dissappear when click on. I know they're all over the net but searching for it only returns javascript autofill scripts where suggestions are listed from a dropdown below the textfield.
HTML5 supports placeholder text, which you can use like this
<input name="email" placeholder="Enter your email address" />
This will automatically disappear when you click on the textfield. For older browsers, you can use one of the above suggestions.
This is what I use on my website Expiringlinks.co. Now, if you only want to apply this to one input, change $('input') to $('#yourinputid'). The input field should have a value field that equals your before text.
var tempValue='';
$('input').click(function(){
tempValue = $(this).attr('value');
$(this).attr('value','');
});
$('input').focusout(function(){
if ($(this).attr('value')==''){
$(this).attr('value',tempValue);
}
});
For you input field
<input type="text" value="Whatever you want to show before the click" />
jsFiddle example
Or, a slightly different fiddle that doesn't require an ID on the label, but needs the textbox/label to be wrapped in something, for example a <p> tag.
HTML
<input type="text" name="email_address" id="Email" />
<label for="Email" id="EmailLabel">Please enter your email address</label>
CSS
label
{
display: none;
}
jQuery
$(document).ready(function()
{
$('#Email').focus(function()
{
$('#EmailLabel').show();
}).blur(function()
{
$('#EmailLabel').hide();
});
});