手机涉及到填写表单时，需要手机弹出自定义的输入框，而非手机自带的输入键盘，如大写数字等。实现思路（考虑多种文本输入形式）：首先，文本框获取焦点时禁止手机弹出自带的输入键盘。// 禁用手机自带的键盘输入框 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来达到我们需要的效果，于是很快的我利用这种方法自...