1.1 文本框

1.1 文本框
1.1.1 基本形制
<input type="text" value="abcd"/>

1.1.1.2 常用属性
1.1.1.2.1 类型
type用于设置文本框的外观类型,type值为text表示该表单元素是文本框,为password表示该表单元素是密码框,为hidden表示该表单元素是隐藏框,为button则表示该表单元素是按钮控件

1.1.1.2.2 值
value用于存取文本框中的文字,同时写在html代码里的value也是文本框的默认值,可以由defaultValue属性获得

1.1.1.2.3 最大字符数
maxLength用于设置文本框中所允许的最大字符数
<input type="text" value="abcd" maxLength="8"/>

1.1.1.2.4 文本框宽度
size用于设置文本框的宽度,以字符计数.使用起来类似模糊控制,要想精确控制还是要用css设置style.width.
<input type="text" value="abcd" size="6"/>

1.1.1.2.5 默认值
defaultValue用于获得文本框的默认值,默认值是文本框value的原始值,这个值在书写代码时就确定了,不随用户输入而改变
取初始值的代码为
var txt=document.getElementById("myTxt");
alert(txt.defaultValue);

1.1.2 文本框的变种
1.1.2.1 密码框
<input type="password" value="1234"/>

1.1.2.2 只读框
<input type="text" value="abcd1234" readonly/>

1.1.2.3 隐藏域
<input type="hidden" value="3456"/>

1.1.3 常见JS对文本框的操作
1.1.3.1 JS取值
如果页面上有一个id为myTxt的文本框,则可调用其value属性获得文本框的内容,代码为
var txt=document.getElementById("myTxt");
alert(txt.value);

1.1.3.2 JS设值
如果页面上有一个id为myTxt的文本框,对其value赋值即设置了文本框的内容,代码为
var txt=document.getElementById("myTxt");
txt.value="ABCD1234";

1.1.3.3 JS动态创建文本框
下面代码是动态创建一个文本框,设置属性后将它添加到一个id为myDiv的div里。
var txt=document.createElement("input");
txt.type="text";
txt.value="4321";
txt.maxLength=6;
document.getElementById("myDiv").appendChild(txt);

1.1.3.4  动态给文本框增添事件
下面代码是动态创建一个文本框,设置属性后将它添加到一个id为myDiv的div里,并给它增加获得焦点时文本全选的效果。
function createTxt(){
    var txt=document.createElement("input");
    txt.type="text";
    txt.value="4321";
    txt.maxLength=6;
    txt.setAttribute("onfocus","slectAllOn(this);");// 动态为文本框增添事件

document.getElementById("myDiv").appendChild(txt);
}
function slectAllOn(txt){
    txt.select();
}

1.1.4 常见事件
1.1.4.1 值变化
onchange用于监控文本框的值变化,当文本框中值改变且焦点移走时此事件被触发
页面代码:
<input type="text" value="abcd" id="myTxt" onchange="showValue()"/>
JS代码:
function showValue(){
    alert(document.getElementById("myTxt").value);
}

1.1.4.2 获得焦点
onfocus用于监控文本框的获得焦点事件,当文本框获得焦点时此事件被触发
页面代码:
<input type="text" value="abcd" id="myTxt" onfocus="selectAll()"/>
JS代码:
function selectAll(){
    document.getElementById("myTxt").select();
}

1.1.4.3 失去焦点
onblur用于监控文本框的失去焦点事件,当文本框失去焦点时此事件被触发
<input type="text" value="abcd" id="myTxt" onblur="showLength()"/>
JS代码:
function showLength(){
    alert(document.getElementById("myTxt").value.length);
}

1.1.4.4 按键
onkeypress用于监控文本框的按键事件,当文本框有键入内容时此事件被触发。
下面是当文本框按下回车键时做出反应的代码,这个处理常用于登录框输入密码后按回车提交处理
页面代码:
<input type="password" value="abcd" id="myTxt" onkeypress="return actWhenEnter(event)"/>
JS代码:
function actWhenEnter(evt){
    evt=(evt)?evt:event;
    var charCode=evt.charCode?evt.charCode:((evt.which)?evt.which:evt.keyCode)
    if(charCode==13 || charCode==3 ){
        alert("Enter key pressed");
        return false;
    }else{
        return true;
    }
}
对文本框加入以下处理能使文本框仅能允许输入数字
页面代码:
<input type="text" value="" id="myTxt" onkeypress="return onlyNumAllowed(event)"/>
JS代码:
function onlyNumAllowed(evt){
    evt=(evt)?evt:event;
    var charCode=evt.charCode?evt.charCode:((evt.which)?evt.which:evt.keyCode)
    if(charCode>31 && (charCode<48 || charCode>57) ){
        return false;
    }else{
        return true;
    }
}

时间: 2024-10-14 00:44:48

1.1 文本框的相关文章

设置input文本框只读效果

设置input文本框只读效果:在实际应用中可能需要将input文本框设置为只读状态,代码实际非常简单,只要添加一个属性即可.代码如下: <input type="text" value="蚂蚁部落" readonly/> 使用readonly属性即可将文本框设置为只读状态,具体可以参阅<input>标签的readonly属性一章节. 原文地址:http://www.51texiao.cn/HTML5jiaocheng/2015/0521/21

M牛C原创博客——UI之文本框输入键盘自动退出,点击空白处退出,切换下个文本框

如何关闭系统弹出的键盘? 1)触屏动作发生后的系统处理过程 step1:查找hitView 系统捕获到触屏动作后,记录触点的坐标,给window发hitTest:消息,并告知出点坐标,window会给所有直接子对象发送hitTest消息,告知点坐标,子对象检测坐标是否在其中,如果不在其中,则返回nil,如果点在其中,则再继续给所有直接子视图发消息,直到某一个子视图,不再有子视图,且触点在其中,则返回这个对象,系统就找到了本次点击的对象 step2:找到hitView后,执行事件响应 查看找到的h

微信内置浏览器浏览H5页面弹出的键盘遮盖文本框的解决办法

Android微信内置浏览H5页面,因为其中的文本输入框(input)放置在靠近页面的中下方,点击文本框以后,则输入框会被弹出的手机输入法键盘遮盖住. 找到一段js代码直接解决之,点击时强制滚动之,好像也解决了在Android浏览器下浏览的同样问题. 1 if(/Android [4-6]/.test(navigator.appVersion)) { 2 window.addEventListener("resize", function() { 3 if(document.activ

IOS系统下虚拟键盘遮挡文本框问题的解决

最近在项目中发现同样的代码在Android端微信网页中点击文本框唤出的虚拟键盘不会遮挡文本框,但是在IOS端的微信网页中点击文本框唤出的键盘却在大部分情况下会遮挡文本框 经过高人指点,这个问题终于解决了 下面说说解决办法: 主要代码 document.body.scrollTop = document.body.scrollHeight; 然后在文本框获取焦点的时候,可以定义一个计时器,一直执行上面的那句话 在文本框失去焦点的时候,就把之前的计时器清除掉即可 js写法: let interval

jQuery 特效【文本框折叠隐藏,展开显示】

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server&quo

HTML文本框样式

1 输入框景背景透明: 2 <input style="background:transparent;border:1px solid #ffffff"> 3 4 鼠标划过输入框,输入框背景色变色: 5 <INPUT value="Type here" NAME="user_pass" TYPE="text" SIZE="29" onmouseover="this.style.b

文本框控件JTextField和JTextArea的使用

-----------------siwuxie095 工程名:TestUI 包名:com.siwuxie095.ui 类名:TestTextFieldAndTextArea.java 工程结构目录如下: 在 Design 的根面板 contentPane 的上中下分别添加 一个 JTextField.JTextArea.JButton JTextField 即 单行文本框,JTextArea 即 多行文本框 文本框是文本的编辑器,可以指定文本的初始数据 即默认文本(text), 可以指定文字的

jQuery监控文本框事件并作相应处理的方法

本文实例讲述了jQuery监控文本框事件并作相应处理的方法.分享给大家供大家参考.具体如下: //事情委托 $(document)  .on('input propertychange', '#query', function(){   var input = $(this).val();   show(input);  });  var show = function(txt){   var info = '监听:<b>' + txt + '</b><br /><

WinForm笔记一:文本框只允许输入数字

在WinForm的文本框中,有时候只允许数字,而不能输入除数字以外的其他字符,要调用TextBox的KeyPress事件,代码如下: //只允许输入数字 if (e.KeyChar<'0'||e.KeyChar>'9') { e.Handled = true; } //允许输入退格键 if (e.KeyChar == 8) { e.Handled = false; } TextBox tBox = sender as TextBox;        //哪个文本框调用,tBox 就是哪个文本框

使用EasyUI,关于日期格式的文本框按照正常方式获取不到值的问题

这是个小菜在实际工作中遇到的问题,相信很多EasyUI新手很可能也遇到这样的问题,因此小菜觉得有必要拿出来分享一下. 这个问题要从EasyUI的datebox组件说起,小菜用这个组件的时候,发现用$("#id").val()这种形式,居然拿不到文本框的值! 经过度娘的帮助,发现可以用$("#id").datebox('getValue'),但是这是为什么捏? 经过一翻研究和探索,小菜发现,如果一个input加上class="easyui-datebox&q