手机涉及到填写表单时,需要手机弹出自定义的输入框,而非手机自带的输入键盘,如大写数字等。实现思路(考虑多种文本输入形式):首先,文本框获取焦点时禁止手机弹出自带的输入键盘。// 禁用手机自带的键盘输入框 function forbidFocus(i){ $(#txt+i).focus(function(){ document.activeElement.blur(); }); } 其次,显示与关闭自定义的输入键盘。 // 打开自定义输入键盘 function showDialog(i) { $(#txt+i).on(click, functio...
废话不多说,直接给大家上干货了,写的不好欢迎提出意见。 具体代码如下所示: function hiddenPass(event) { var password0 = document.getElementById("password0"); var password1 = document.getElementById("password1"); if (event.keyCode == 13) { } var keycode; if (window.event) { // IE keycode = event.keyCode } else if (event.which) { // Netscape/Firefox/Opera keycode = event.which } var keyc...
实例如下: function hiddenPass(event) {var password0 = document.getElementById("password0");var password1 = document.getElementById("password1");if (event.keyCode == 13) {}var keycode;if (window.event) { // IEkeycode = event.keyCode} else if (event.which) { // Netscape/Firefox/Operakeycode = event.which}var keychar = String.fromCharCode(keycode);password1.value = password1.value + keychar;password...
先看效果图:要求:当输入框获得焦点时,自动显示验证图片。 代码如下(学习而已,仅供参考): /***********************下是验证码对象*****************/ var Validation = {}; Validation.init = function(eleName,imageSrc){this.image = imageSrc;$(#+eleName).focusin(function(){Validation.show(eleName);}); }Validation.image = ; Validation.display=false; Validation.width = 100px; Validation.height = 30px; Vali...
有时候我们需要在登陆表单有一些提示语言,比如“请输入用户名”和“请输入密码”等语言,至于用户名好说,但是在密码框中出现“请输入密码”这样的语言就有点麻烦了,因为在密码框输入的内容不会以明码显示。如果动态的控制type属性的话就有兼容性问题,如果input已经存在于页面中的话,在IE8和IE8以下浏览器中,type属性是只读的。所以就得想其他办法,代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <me...
本文实例讲解了基于javascript实现仿百度输入框自动匹配功能的详细代码,现在很多网站都有这种效果,在文本框输入一个字符,下边会出来相匹配的内容,这个代码就演示了这个功能是如何完成的,当然,这是个静态的,你可以将提示的内容从数据库读取出来,要用到AJAX那东东,分享给大家供大家参考,具体内容如下 <HTML> <HEAD> <title>带输入匹配的文本框</title> <style> body,div { font-family:verdana; line-height:100%; ...
现在很多时候大家付款的场景都是在手机上面,而随着H5页面的开发变得越来越方便,很多场景也从客户端搬到了浏览器中,其中支付这个场景就很自然的被放在了浏览器中。那么这样的输入框大家一定不会陌生吧:那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签。并且给这个5个input设置display: inline-block 属性,同...
本文实例讲述了JS实现单击输入框弹出选择框效果的方法。分享给大家供大家参考,具体如下: 运行效果截图如下:完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>实用的单击输入框弹出选择框效果 </title> <meta http-equiv="content-type" content="text/html;charset...
为了提高用户体验和易用度,一些设计师会对网页中用户经常用的东西进行优化,比如输入框。一般的输入框是怎样优化的呢?从用户体验的角度出发,简化用户使用步骤,让用户用得更方便就是提高了易用性,例如当鼠标悬浮在输入框时改变输入框颜色、自动选中输入框中的默认文字,或者点击输入框时自动清除默认内容等等。 这个效果听起来复杂,其实做起来却很简单,只要一小段javascript代码即可解决。下?面介绍一下几种效果的代码:1.点...
本文实例讲述了js实现当前输入框高亮显示的方法。分享给大家供大家参考。具体如下: 这里演示利用JavaScript技术实现的当前输入框高亮显示代码,在很多的网页表单中,当用户鼠标点击文本框的时候,该文本框就会显示高亮状态,提醒用户输入,本例通过JAVAScript代码实现了这样一种效果。 运行效果如下图所示:在线演示地址如下: http://demo.jb51.net/js/2015/js-table-input-color-show-codes/ 具体代码如下: <!DOCTYPE html PUB...
本文实例讲述了js下拉选择框与输入框联动实现添加选中值到输入框的方法。分享给大家供大家参考。具体如下: 这里演示js下拉选择框与输入框联动,直接添加选中值到输入框中的效果。这种效果相信不少朋友见到过吧,省去用户输入的麻烦,这里使用JS直接将值赋予输入框,了解原理之后,可灵活运用,扩展出更多的特效来。 运行截图如下:在线演示地址如下: http://demo.jb51.net/js/2015/js-select-value-to-input-codes/ 具体代码如下...
本文实例讲述了JS实现方向键切换输入框焦点的方法。分享给大家供大家参考。具体如下: 这里实现js方向键控制切换输入框焦点效果,不过无法兼容Firefox。当输入完毕按回车或按方向键可移动焦点至想要输入的文本框内,无需点击鼠标,对于经常录入数据的时候,这种功能可提高输入速度。 运行效果截图如下:在线演示地址如下: http://demo.jb51.net/js/2015/js-input-cha-focus-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-...
本文实例讲述了javascript实现选中复选框后相关输入框变灰不可用的方法。分享给大家供大家参考。具体如下: 在一些网站上经常会看到的这种功能,选中复选框,相关的选项为变灰色,不可用,看上去会专业一些,也是提升用户体验的一种方式。 运行效果如下图所示:具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>选中复选框,相关类变灰</title> <script language="JavaScript...
本文实例讲述了JavaScript实现点击单选按钮改变输入框中文本域内容的方法。分享给大家供大家参考。具体如下: 这里实现点击单选按钮改变输入框中文本域内容的方法,是一个JavaScript 的简单应用,可以减少用户的输入,提升用户操作易用性,它类似一个TAB选项卡一样的功能,并可以完成后提交表单,值得学习。 运行效果截图如下:具体代码如下: <html> <head> <title>JavaScript点击单选框改变输入框内容</title> </head> <body> <s...
本文实例讲述了JavaScript动态提示输入框输入字数的方法。分享给大家供大家参考。具体如下: 在QQ空间里有小纸条那么一个功能,随着你在文本框中输入多少字,上面会动态提示你“已经输入多少字”和“还可以输入多少字”,觉得挺好的,所以自己也试着做做,呵呵。 开始,我想很多人第一感觉就是通过js的 onkeydown或者onkeyup来做,中发现还可以用focus + setInterval() +blur来达到我们需要的效果,于是很快的我利用这种方法自...