How to clear default value of form when the user starts typing (jquery)
Question
How do I get the form field (with default text "default") to be cleared when the user starts typing? I attached my code below. I want it to have similar functionality to the .prompt() command.
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Modal form</title>
<script src="jquery-2.1.4.min.js"></script>
<script src="jquery-ui.js"></script>
<link href="css.css" rel="stylesheet" type="text/css" />
<link href="jquery-ui.css" rel="stylesheet" type="text/css" />
<style>
</style>
<script>
$ (function() {
var dialog;
dialog = $("#dialog-form").dialog({
autoOpen: false,
height:300,
width:350,
modal:true,
});
form = dialog.find( "form" ).on( "submit", function( event ){
event.preventDefault();
$( "#placeName" ).append(name.val);
});
$ ( "#clickMe" ).button().on("click", function(){
dialog.dialog("open");
});
});
</script>
Here is where the form is made, and the value is set to "default"
<body>
<div id="dialog-form" title="create user"> <!--starts out hidden-->
<form>
<input type="text" name="name" id="name" value="default" class="text ui-widget-content ui-corner-all">
</form>
</div>
<button id="clickMe">Click!</button>
<br><br><hr><br><br>
<div id="placeName"></div>
</body>
</html>
3 answers
solution1
1 2015-06-22 17:31:09
<input {Other attributes} placeholder="default" />
但是，您需要删除value属性。
solution2
0 2015-06-22 17:32:38
If you specifically don't want placeholder but as value .
<div id="dialog-form" title="create user"> <!--starts out hidden--> <form> <input type="text" name="name" id="name" value="default" class="text ui-widget-content ui-corner-all" onfocus="this.onfocus=null;this.value=''" onblur="this.value=this.value||'default'"> </form> </div>
solution3
0 2015-06-22 17:33:08
If I correctly understood your question, I would have a look at this thread .
For you it'd be something like:
$('input').on('click focusin', function() {
this.value = '';
});
if you really want to have a text in your input and not a placeholder but wasn't clear in your question.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.