彩世界开奖app官网-彩世界平台官方网址(彩票平台)
做最好的网站
来自 彩世界平台官方网址 2019-11-28 06:10 的文章
当前位置: 彩世界开奖app官网 > 彩世界平台官方网址 > 正文

文本框得到大旨和失去主题的判定代码彩世界平

Firefox/Chrome/Opera从某一版本开始已经支持这一特性,但ie系列即使是ie9也还不支持,所以需要通过javascript来兼容这些不支持placeholder特性的浏览器。 普遍的做法 现在普遍使用的做法是通过表单元素的onfocus/onblur事件来改变value值,如下: 复制代码 代码如下:

实例

jQuery的各个watermark插件( 这种做法直接操作表单元素,方便快捷,比较实用。 但它也有弊端: 有些操作同样需要通过监听表单元素的value值来实现功能,比如:autocomplete、验证等 表单提交时需要清空它的值 当然可能还有其他弊端,这里不再列举。 更好的做法 为了避免引起不必要的麻烦,就要避免去改变表单元素的value值。 首先,假如有如下一个文本框: 复制代码 代码如下: 既然不能改变文本框的值,那么只能通过添加一个span或其他元素,并通过绝对定位放置到文本框之上,并在外框加一个position:relative的容器来包装它们以保证提示信息不会产生偏移,如: 复制代码 代码如下: 提示信息 无意中发现淘宝的登录页面并不需要额外加一层position:relative的容器来包装也不会产生偏移,所以仅需要把提示信息的标记放在文本框之前即可,如下: 复制代码 代码如下: 提示信息 这样子产生的标记更加简洁。 相应的样式 既然最终呈现的标记已经确定,那么现在就需要定义相应的样式,来使它看起来更美观,如下: 复制代码 代码如下: /* 标记的主要样式 style */ .w-label { position: absolute; padding: 0 0 0 6px; margin: 0; font-size: .8em; color: #999; opacity: 1; } /* 隐藏标记 */ .w-hide { visibility: hidden; opacity: 0; } /* 表单元素获得焦点时,标记的颜色 */ .w-active { color: #ddd; } 那么html就相应的变成: 复制代码 代码如下: 提示信息 相关的脚本 虽然不需要去改变表单元素的value值来实现效果,但还是需要通过onfocus/onblur事件来控制提示信息的标记,全部实现如下: 复制代码 代码如下: /* 事件绑定 */ var addEvent = document.addEventListener ? function { element.addEventListener; } : function { element.attachEvent; }, /* 事件解除绑定 */ removeEvent = document.removeEventListener ? function { element.removeEventListener; } : function { element.detachEvent; }, /* 文本框水印/占位符 */ watermark = function { if (!(this instanceof watermark)) return new watermark; var place = document.createElement;//提示信息标记 element.parentNode.insertBefore;//插入到表单元素之前的位置 place.className = "w-label"; place.innerHTML = text; place.style.height = place.style.lineHeight = element.offsetHeight "px";//设置高度、行高以居中 element.place = this; function hideIfHasValue() { if (element.value && place.className.indexOf place.className = " w-hide"; } function onFocus if (!element.value && place.className.indexOf place.className = " w-active"; } function onBlur() { if { place.className = place.className.replace; place.className = place.className.replace; } } function onClick; try { element.focus && element.focus {} } // 注册各个事件 hideIfHasValue(); addEvent(element, "focus", onFocus); addEvent(element, "blur", onBlur); addEvent(element, "keyup", hideIfHasValue); addEvent(place, "click", onClick); // 取消watermark this.unload = function() { removeEvent(element, "focus", onFocus); removeEvent(element, "blur", onBlur); removeEvent(element, "keyup", hideIfHasValue); removeEvent(place, "click", onClick); element.parentNode.removeChild; element.place = null; }; }; 以上代码分别通过表单元素的focus/blur/keyup事件来控制提示信息标记的显示、隐藏及样式;另外还通过提示信息标记的click事件来隐藏它及为表单元素获得焦点。 最后提供一个unload方法来取消watermark。 具体使用 有了以上的js及css,那么就可以直接使用它们来实现watermark功能了,如下演示应用及取消watermark: 复制代码 代码如下:

下面是一个简单的例子:

html5 placeholder兼容 既然有了以上的实现,那么兼容不支持html5 placeholder的浏览器也很简单,首先,需要判断浏览器是否支持placeholder: 复制代码 代码如下:var html5support = "placeholder" in document.createElement; 接着,对不支持html5 placeholder的浏览器,提取表单元素的placeholder内容,实现如下: 复制代码 代码如下: placeHolderForm = function { var ph, elems = form.elements, html5support = "placeholder" in document.createElement; if { for (var i = 0, l = elems.length; i < l; i ) { ph = elems[i].getAttribute; if elems[i].ph = watermark; } } } 演示代码如下: 复制代码 代码如下:

jquery代码

结尾 至此,功能全部完成,放上全部代码:点击下载,如有额外需要可自行修改。 作者:囧月 出处:

html5给表单文本框新增加了几个属性,比如:email,tel,number,time,required,autofocus,placeholder等等,这些属性给表单效果带来了极大的效果变化。
其中placeholder就是其中一个,它可以同时完成文本框获得焦点和失去焦点。必须保证input的value值为空, placeholder的内容就是我们在页面上看到的内容。
代码如下:

<input type="text" value="" title="请输入内容" />

blur():失去焦点时使用,和onblur一样。
如:

文本框失去焦点事件、获得焦点事件
onBlur:当失去输入焦点后产生该事件
onFocus:当输入获得焦点后,产生该文件
Onchange:当文字值改变时,产生该事件
Onselect:当文字加亮后,产生该文件
onpropertychange 当属性改变发生该事件
无论粘贴 keyup onchange等,最为敏感

复制代码 代码如下:

<input type="text" value="" placeholder="请输入内容" />

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script>
function tt(){
var i=document.form1.text1.value;

原理:让表单的val值等于其title值。
代码如下:

$("p").focus(); 或$("p").focus(fn)

第一种: html5

<form>
<label for="searchKey" id="lbSearch">搜神马?</label>  这里label覆盖在文本框上,可以更好的控制样式
<input id="searchKey" type="text" />
<input type="submit" value="搜索" />
 </form>  

对于元素的焦点事件,我们可以使用jQuery的焦点函数focus(),blur()。

复制代码 代码如下:

先来看javascript的直接写在了input上

复制代码 代码如下:

复制代码 代码如下:

复制代码 代码如下:

好了相当的不错吧

复制代码 代码如下:

$("p").blur(); 或$("p").blur(fn)

<%@ Page Language="VB" CodeFile="focus.aspx.vb" Inherits="focus" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns="" >
<head runat="server">
<title>无标题页</title>
<script language="javascript">
function text1_onmouseover(it)
{
it.focus();
it.select();
it.style.backgroundColor="red";
}
function text1_onmouseout(it)
{
it.onblur;
it.style.backgroundColor="white";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" onmouseover="return text1_onmouseover(this);" onblur="text1_onmouseout(this)" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>

$(function() {
$('#searchKey').focus(function() {
$('#lbSearch').text('');
});
$('#searchKey').blur(function() {
var str = $(this).val();
str = $.trim(str);
if(str == '')
$('#lbSearch').text('搜神马?');
});
})

复制代码 代码如下:

<script type="text/javascript">
$(function() {
var $input = $("input");
$input.each(function() {
var $title = $(this).attr("title");
$(this).val($title);
$(this).focus(function() {
if($(this).val() === $title) {
$(this).val('');
}
})
.blur(function() {
if($(this).val() === "") {
$(this).val($title);
}
});
});
});
</script>

<input name="pwuser" type="text" id="pwuser"   class="input" value="楼盘账号"   onBlur="if(this.value=='') this.value='楼盘账号';" onFocus="if(this.value=='楼盘账号') this.value='';" />
<input name="pwpwd" type="password"    class="input1" value="******"  onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';">  

第二种: jQuery

jquery实现方法

onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产...

</script>
<body>
<form name="form1">
用户名:<input type="text" id="text1" value="请输入用户名" onfocus="javascript:document.form1.text1.value=''" onblur="tt()"/>
<span id="s1"></span><br />
密码:<input type="text" id="text2" value="请输入密码" onfocus="javascript:document.form1.text2.value=''" onblur="a()"/>
<span id="s2"></span><br />
<input type="button" id="button" value="登陆" />
</form>
</body>
</html>

focus():得到焦点时使用,和javascript中的onfocus使用方法相同。
如:

复制代码 代码如下:

文本框获得焦点、失去焦点调用JavaScript

复制代码 代码如下:

复制代码 代码如下:

if(i.length>=6)
document.getElementById("s1").innerHTML="用户名不能大于6位";
else
document.getElementById("s1").innerHTML="";
}
function a(){
var j=document.form1.text2.value;
if(j.length>=6)
document.getElementById("s2").innerHTML="密码不能大于6位"
else
document.getElementById("s2").innerHTML="";
}

本文由彩世界开奖app官网发布于彩世界平台官方网址,转载请注明出处:文本框得到大旨和失去主题的判定代码彩世界平

关键词: 脚本 水印 之家 文本框