IE8等不支持placeholder，通过javascript实现此功能，能够兼容多种浏览器

来源：互联网发布：全民奇迹源码编辑：程序博客网时间：2024/05/01 20:18

index.jsp代码如下

<html>
<head>
<script src="jquery/jquery-1.3b2.js"></script>
<script type="text/javascript">
// Mock client code for testing purpose
$(function(){
// Client should be able to add another change event to the textfield
$("input[name='input1']").blur(function(){ alert("Blurred"); });
// Client should be able to set the field's styles, without affecting place holder
$("textarea[name='input4']").css("color", "red");
});
</script>

<script src="jquery/placeholder.js"></script>
</head>
<body>
<form method="get" action="">
Text field: <input name="input1" type="text" placeholder="This is a placeholder" />
<br/>
Text field with default value: <input name="input2" type="text" placeholder="This is a placeholder" value="This is default text" />
<br/>
Placeholder for this field is not supported:
<input name="input3" type="password" placeholder="This is a placeholder for password"/>
<br/>
Text area: <textarea name="input4" placeholder="This is a placeholder"></textarea>
<br/>
Text area: <textarea name="input5" placeholder="This is a placeholder">This is default text</textarea>
<br/>
Form submit button: <input type="submit" value="Click and look at the URL for how field values are submitted" />
</form>
</body>
</html>

placeholder.js代码如下

/*!
* jQuery Placeholder snippet
*
* This snippet is written for the purpose of supporting the
* HTML5 placeholder attribute on most non-HTML5-compliant browsers.
*
* Usage: Just include it in the code: <script src="jquery.place.holder-1.0.js"></script>
* and include the HTML5 placeholder attribute in your input or textarea tags.
* Note: This script should go after client code, if client code sets field's color.
*

* Version: 1.0
* jQuery Version: 1.5
* Changelog: Initial release
* Tested on: Chrome 10.0; IE6 (IETester); IE8 (IETester)
* Known Issues:
* Placeholder for Password is currently not supported
*/

$(function(){
// -- Constants --
var PLACE_HOLDER_COLOR = "rgb(169,169,169)"; // "darkGrey" does not work in IE6
var PLACE_HOLDER_DATA_NAME = "original-font-color";

// -- Util Methods --
var getContent = function(element){
return $(element).val();
}

var setContent = function(element, content){
$(element).val(content);
}

var getPlaceholder = function(element){
return $(element).attr("placeholder");
}

var isContentEmpty = function(element){
var content = getContent(element);
return (content.length === 0) || content == getPlaceholder(element);
}

var setPlaceholderStyle = function(element){
$(element).data(PLACE_HOLDER_DATA_NAME, $(element).css("color"));
$(element).css("color", PLACE_HOLDER_COLOR);
}

var clearPlaceholderStyle = function(element){
$(element).css("color", $(element).data(PLACE_HOLDER_DATA_NAME));
$(element).removeData(PLACE_HOLDER_DATA_NAME);
}

var showPlaceholder = function(element){
setContent(element, getPlaceholder(element));
setPlaceholderStyle(element);
}

var hidePlaceholder = function(element){
if($(element).data(PLACE_HOLDER_DATA_NAME)){
setContent(element, "");
clearPlaceholderStyle(element);
}
}

// -- Event Handlers --
var inputFocused = function(){
if(isContentEmpty(this)){
hidePlaceholder(this);
}
}

var inputBlurred = function(){
if(isContentEmpty(this)){
showPlaceholder(this);
}
}

var parentFormSubmitted = function(){
if(isContentEmpty(this)){
hidePlaceholder(this);
}
}

// -- Bind event to components --
$("textarea, input[type='text']").each(function(index, element){
if($(element).attr("placeholder")){
$(element).focus(inputFocused);
$(element).blur(inputBlurred);
$(element).bind("parentformsubmitted", parentFormSubmitted);

// triggers show place holder on page load
$(element).trigger("blur");
// triggers form submitted event on parent form submit
$(element).parents("form").submit(function(){
$(element).trigger("parentformsubmitted");
});
}
});
});

0 0