What is the best method to clear text in a text field, when the user clicks on it?
I.e., if the text search field says "search" and when they click it, it clears the value.
You could do like:
<input type="text" onfocus="if(this.value == 'search') {this.value=''}" onblur="if(this.value == ''){this.value ='search'}">
<input name="foo" placeholder="Search" />
The placeholder tag is a new HTML5 tag that does exactly what you want to do here.
Normal HTML:
<script type="text/javascript">
function clearThis(target){
target.value= "";
}
</script>
<input type="text" value="Search" onfocus="clearThis(this)" />
jQuery:
<script type="text/javascript">
function clearThis(target){
$(target).val = "";
}
</script>
<input type="text" value="Search" onfocus="clearThis(this)" />
In JavaScript you can simple set the value of the contorol to an empty string in the OnFocus event handler.
If jquery's an option, I'd consider the watermark plugin
It achieves what you're after, but with a bit more style
Related
<input type="number" class="setter" id="day-set" name="day-set" value="day"max="30" min="0" placeholder="00"onkeyup="if(parseInt(this.value)>30){ this.value =30; return false;}">
How do I make it so that the input typed in by the user in the input field is cleared when a submit button is pressed (the one which does not refreshes the page)
you can add this to the onclick function of your button and replace the myForm with the id of your form element
document.getElementById("myForm").reset();
<html>
<body>
<p>Clear the input field when you click on the button:</p>
<button onclick="document.getElementById('myInput').value = ''">Clear input
field</button>
<input type="text" value="Blabla" id="myInput">
</body>
</html>
You can also write the javaScript in-between the script tag in a Function or any other way that you want.
You can create a function and add it into the onSubmit event of your form (assuming that you have a form) and then inside of that function you only need to clear the value using something like this:
document.getElementById('day-set').value = ''
Example:
<form onsubmit="myFunction()">
<input type="number" class="setter" id="day-set" name="day-set" value="day"max="30" min="0" placeholder="00"onkeyup="if(parseInt(this.value)>30){ this.value =30; return false;}">
<input type="submit">
</form>
<script>
function myFunction(){
document.getElementById('day-set').value = ''
}
</script>
I have an input text field with a placeholder attribute. The placeholder disappears when I enter text, but I would like the the placeholder text to reappear after I click the button, "clear," or when the text field is empty. What are some ways I can achieve this?
Below is the code I have below. I tried
document.text.value = "hello";
but the text "hello" stays in the box when I start typing.
HTML
<input type="text" placeholder="hello">
<input type="button" value="clear" onclick(clearText)>
Javascript
function(clearText) {
document.text.value = " ";
}
When the text field is empty, the placeholder will reappear automatically.
When the clear button is clicked, you can use onclick attribute on the button and define the function like this:
Implementation with pure JS:
<script>
function clearText() {
// we use getElementById method to select the text input and than change its value to an empty string
document.getElementById("my_text").value = "";
}
</script>
<!-- we add an id to the text input so we can select it from clearText method -->
<input id="my_text" type="text" placeholder="hello">
<!-- we use onclick attribute to call the clearText method -->
<input type="button" value="clear" onclick="clearText();">
JSFiddle Demo
Or you can use jQuery:
<script>
function clearText() {
$("#my_text").val("");
}
</script>
<input id="my_text" type="text" placeholder="hello">
<input type="button" value="clear" onclick="clearText();">
JSFiddle Demo
The easiest way to do it:
<input placeholder="hello" onchange="if (this.value == '') {this.placeholder = 'hello';}"
/>
You were very close
HTML :
<input type="text" id='theText' placeholder="hello">
<input type="button" value="clear" onclick='clearText()'>
JavaScript :
clearText = function(){
document.getElementById('theText').value = "";
}
Demo : http://jsfiddle.net/trex005/7z957rh2/
There are multiple problems with your javascript syntax, starting from function declarations and ending with onclick event specification.
However, you were on the right way, and code below does the trick:
<input type="text" placeholder="hello">
<input type="button" value="clear" onclick="document.querySelector('input').value=''">
However, it will only work if this is the only input box in your document. To make it work with more than one input, you should assign it an id:
<input type="text" id="text1" placeholder="hello">
<input type="button" value="clear" onclick="document.querySelector('#text1').value=''">
and use "text2" and so on for other fields.
You should not forget to set "return false;"
document.getElementById('chatinput').onkeypress = function(){
var key = window.event.keyCode;
if (key === 13) {
var text = this.value;
var object = document.getElementById('username_interface');
email = object.email;
username = object.username;
empty = /^\s+$/;
// function Send Message
this.value = "";
return false;
}else{
return true;
}}
Below is a sample HTML code with script tag using jquery:
<html>
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var email_def= "Enter email address";
$('input[type="email"]').attr('value', email_def).focus(function() {
if ($(this).val() == email_def) {
$(this).attr('value', '');
}
}).blur(function() {
var val = $(this).val();
if (val == '') {
$(this).attr('value', email_def);
alert(val);
alert(email_def);
}
});
});
</script>
</head>
<body>
<form>
Email: <input type="email"> <input type="submit" id="submit">
</form>
</body>
</html>
Steps to reproduce:
Click in the input box. Placeholder value is cleared. Click outside, placeholder value is now reset back.
Click in the input box. Type some text. Delete the text. Click outside. The placeholder value is not reset back.The alert are triggered. Even the email_def is being shown in alert. Now, the attribute value is not being reset to value of email_def.
My question is why is the line $(this).attr('value', email_def); not being invoked inside the blur function.
Edit: Thanks for the answers. Both, the placeholder of html5 and also replacing with the $(this).val(); line seems to be working correctly
Instead of $(this).attr('value', email_def);, consider $(this).val(email_def);. It will behave as you've specified.
Rafael is correct to suggest using HTML's placeholder instead, unless you have some specific need regarding Internet Explorer.
Use HTML5 Placeholder attribute
A hint to the user of what can be entered in the control . The
placeholder text must not contain carriage returns or line-feeds. This
attribute applies when the value of the type attribute is text,
search, tel, url or email; otherwise it is ignored.
http://jsfiddle.net/xj7v8gd7/
<form action="<some action>">
<input type="email" id="emailForm" size="30" placeholder="Enter email address"><br>
<input type="submit" value="Submit">
</form>
Rafael is correct. However, if you need it to work in browsers old enough that they don't support the placeholder attribute, just switch your value attribute setters to use the overload on val() instead. So:
$(this).val('Enter the email address') //for example
See that demonstrated below (it looked like only the one in the blur method was actually a problem.
$(document).ready(function() {
var email_def = "Enter email address...";
$('input[type="email"]').attr('value', email_def).focus(function() {
//alert('focus');
if ($(this).val() === email_def) {
$(this).val('');
}
}).blur(function() {
if ($(this).val() === '') {
$(this).val(email_def);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
Email:
<input type="email" id="emailForm" size="30" />
<input type="submit" id="submitForm" />
</form>
I know you can add readonly="readonly" to an input field so its not editable. But I need to use javascript to target the id of the input and make it readonly as I do not have access to the form code (it's generated via marketing software)
I don't want to disable the input as the data should be collected on submit.
Here is the page I have added in the below suggestion with no luck so far:
https://www.pages05.net/engagedigital/inputReadOnly/test?spMailingID=6608614&spUserID=MTI5MDk4NjkzMTMS1&spJobID=Nzk4MTY3MDMS1&spReportId=Nzk4MTY3MDMS1
Make sure you use <body onload="onLoadBody();"> for anyone using this in the future.
You can get the input element and then set its readOnly property to true as follows:
document.getElementById('InputFieldID').readOnly = true;
Specifically, this is what you want:
<script type="text/javascript">
function onLoadBody() {
document.getElementById('control_EMAIL').readOnly = true;
}
</script>
Call this onLoadBody() function on body tag like:
<body onload="onLoadBody">
View Demo: jsfiddle.
The above answers did not work for me. The below does:
document.getElementById('input_field_id').setAttribute('readonly', true);
And to remove the readonly attribute:
document.getElementById('input_field_id').removeAttribute('readonly');
And for running when the page is loaded, it is worth referring to here.
document.getElementById('TextBoxID').readOnly = true; //to enable readonly
document.getElementById('TextBoxID').readOnly = false; //to disable readonly
document.getElementById("").readOnly = true
Try This :
document.getElementById(<element_ID>).readOnly=true;
<!DOCTYPE html>
<html>
<body>
<input id="balloons" type="number" step="10" min="1" max="1000" size="25" value="60" >
<input id="bloquear" type="checkbox" onclick="validate()" />
<p id="demo1"></p>
<p id="demo2"></p>
<script type=text/javascript>
function validate(){
document.getElementById("bloquear").checked == (bloquear.checked == 1 ? false : true );
document.getElementById("demo1").innerHTML = bloquear.checked;
document.getElementById("demo2").innerHTML = balloons.readOnly;
if (balloons.readOnly) document.getElementById("balloons").removeAttribute("readonly");
else balloons.setAttribute("readonly", "readonly");
}
</script>
</body>
</html>
Here you have example how to set the readonly attribute:
<form action="demo_form.asp">
Country: <input type="text" name="country" value="Norway" readonly><br>
<input type="submit" value="Submit">
</form>
I think you just have readonly="readonly"
<html><body><form><input type="password" placeholder="password" valid="123" readonly=" readonly"></input>
I have no access to the html, I need JavaScript code that will add the word "Search" to the value="" that is blank for the input with id "ReportQuery".
How should I code it?
Here is the code below:
<div>
<input name="data[Report][query]" type="text" class="input_firm" value="" onChange="this.form.submit();" onClick="if( this.value == 'Search' ) { this.select(); }" id="ReportQuery" />
<input type="submit" value="Search" />
</div>
if its a div
$('div#idDiv').text('search');
if its an input (because you comment .value :S)
$('input#idDiv').val('search');
See this article, it comes with many examples and details:
http://www.javascript-coder.com/javascript-form/javascript-form-value.phtml
BTW, this is about the "direct" JS way, no jQuery involved, e.g.
oFormObject = document.forms['myform_id'];
oFormObject.elements["element_name"].value = 'Some Value';
$('#ReportQuery').val('Search');
http://jsfiddle.net/L9YS4/
A good place to start for learning jQuery:
http://jqfundamentals.com/