分类 Html 下的文章

使用HTML5的Placeholder属性给输入框增加背景文字提示效果

背景文字提示效果是输入框常用的功能,但大部分是使用JavaScript实现的:

value="请输入影片名称或主演名称..." onBlur="if(this.value=='') this.value='请输入影片名称或主演名称...';" onFocus="if(this.value=='请输入影片名称或主演名称...') this.value='';"

HTML5提供了新的实现方式,只需要在文本框的标记上添加placeholder属性,然后在属性值里输入你需要的提示信息即可。
语法:

<input placeholder=”提示信息...”>

示例:

<form>
<input type="text" placeholder="你的姓名..." name="lname">
<input type="password" placeholder="你的密码..." name="pass">
<input type="submit" value="提交">
</form>

用在评论框时,可能需要换行,但Placeholder默认不支持换行,这里以JS实现:

$(function() {
    var placeholder = '第一行文本提示\n第二行文本提示\n第三行文本提示';
    $('textarea').val(placeholder);
    $('textarea').css({"line-height":"20px","color":"#A9A9A9"});
    $('textarea').focus(function() {
        if ($(this).val() == placeholder) {
            $(this).val('');
        }
    });
    $('textarea').blur(function() {
        if ($(this).val() == '') {
            $(this).val(placeholder);
        }
    });
});

Html5 audio标签详解

audio标签的语法结构:

<audio src="音频地址">您的浏览器不支持audio标签</audio>

其中audio中间的文字可以去掉,加上这些文字是为了让一些不支持audio标签的浏览器进行识别.

audio标签的基本属性:
src(链接地址);
loop(设置是否循环播放);
autoplay(自动播放);
controls (提供给用户一个可以控制音频的控件);
preload(可以选择设置“none”,“metadata”,“auto”)

none:默认不加载,按需加载. metadata::元数据,默认不加载,但是可以提取该音频的元数据信息. auto:自动加载,如果不是动态载入的audio,该音频会随页面一起加载进来.





- 阅读剩余部分 -