关于表单——input属性

最新推荐文章于 2022-01-05 23:36:15 发布

转载最新推荐文章于 2022-01-05 23:36:15 发布 · 4.3k 阅读

文章标签：

#input #stylesheet #javascript #jquery #浏览器 #comments

WEB 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了JavaScript在网页中的应用，包括事件处理、表单操作、动态样式修改及页面导航等基本技能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Query获取Select选择的Text和Value:

语法解释：

//为Select添加事件，当选择其中一项时触发

1. $(“#select_id”).change(function(){//code…});

//获取Select选择的Text
2. var checkText=$(“#select_id”).find(“option:selected”).text();

//获取Select选择的Value
3. var checkValue=$(“#select_id”).val();

//获取Select选择的索引值
4. var checkIndex=$(“#select_id “).get(0).selectedIndex;

//获取Select最大的索引值
5. var maxIndex=$(“#select_id option:last”).attr(“index”);

jQuery设置Select选择的Text和Value:

语法解释：

//设置Select索引值为1的项选中

1. $(“#select_id “).get(0).selectedIndex=1;

//设置Select的Value值为4的项选中
2. $(“#select_id “).val(4);

//设置Select的Text值为jQuery的项选中
3. $(“#select_id option[text='jQuery']“).attr(“selected”, true);

原文地址：http://www.supesoft.com/ArticleDisp.asp?ID=4825

补充：

获取一组radio被选中项的值,XXX为radio的name
var item = $(‘input[name=XXX][type=radio]:checked’).val();

获取select被选中项的文本
var item = $(“select[name=items] option[@selected]“).text();
select下拉框的第二个元素为当前选中值
$(‘#select_id’)[0].selectedIndex = 1;
radio单选组的第二个元素为当前选中值
$(‘input[name=items]‘).get(1).checked = true;

获取值：

文本框，文本区域：$(“#txt”).attr(“value”)；
多选框checkbox：$(“#checkbox_id”).attr(“value”)；
单选组radio： $(“input[type=radio]:checked”).val();
下拉框select： $(‘#sel’).val();

控制表单元素：
文本框，文本区域：$(“#txt”).attr(“value”,”);//清空内容
$(“#txt”).attr(“value”,’11′);//填充内容

多选框checkbox： $(“#chk1″).attr(“checked”,”);//不打勾
$(“#chk2″).attr(“checked”,true);//打勾
if($(“#chk1″).attr(‘checked’)==undefined) //判断是否已经打勾

单选组radio： $(“input[type=radio]“).attr(“checked”,’2′);//设置value=2的项目为当前选中项
下拉框select： $(“#sel”).attr(“value”,’-sel3′);//设置value=-sel3的项目为当前选中项
$(“<option value=’1′>1111</option><option value=’2′>2222</option>”).appendTo(“#sel”)//添加下拉框的option
$(“#sel”).empty()；//清空下拉框

五 08

javascript 学习笔记《JavaScript And DHTML Cookbook》

网页设计,资源No Comments »

·表单( forms )
1.访问表单
document.forms[0]
document.forms["myForm"]
document.myForm
document.all.myForm
document.getElementById(“myForm”)

document.forms[0].elements[0]
document.forms["myForm"].elements["myElement"]
document.myForm.myElement

2. 让文本框自动获得焦点
//让名为myText的文本框在页面加载时自动获得焦点,并选中当前文本框的值
<body onload=”document.myForm.myText.focus(); document.myForm.myText.select();”>

3. 通用的文本框验证函数
//验证是否为空
<input type=”text” onchange=”isEmpty(this)”>

function isEmpty(obj){
if(obj.value == null || obj.value == ”") alert(” 此字段不能为空”);
}

//验证是否为数字
<input type=”text” onchange=”isNumber(this)”>

function isNumber(obj){
var val = obj.value;
var r = /\w[0-9]{1,}/;
if( !r.test(val) ) alert(” 此字段必须为数字”)
}

//验证是否长度符合
<input type=”text” onchange=”isLen7(this)”>

function isLen7(obj){
if(obj.value.length != 7) alert(” 此字段长度必须为7位”);
}

//验证有效E-Mail地址
<input type=”text” onchange=”isEmail(this)”>

function isEmail(obj){
var val = obj.value;
var r = /^\w[0-9a-zA-Z.\-]{3,}@\w[0-9a-zA-Z.\-]{2,}.\w[a-zA-Z.]{2,4}$/;
if( !r.test(val) ) alert(” 请输入有效的E-Mail地址”);
}

4.阻止表单提交
<form action=”#” onsubmit=”return checkValue()”></form>

function checkValue(){
//do something to check the value.
return false;
}

5. 改变表单提交的页面
<form action=”#” onsubmit=”chooseAction()”></form>

fucntion chooseAction(){
if(document.myForm.myCheckBox.checked) document.myForm.action = ”a.asp”;
else document.myForm.action = ”b.asp”;
}

6. 阻止向文本框输入某些字符
<input type=”text” onkeydown=”checkKeyCode(event)”>

fucntion checkKeyCode(evt){
evt = (evt) ? evt : event;
var c = (evt.charCode) ? evt.charCode : evt.keyCode;
if(c < 48 || c > 57){
alert(” 此字段只允许输入数字”);
return false;
}
else return true;
}

7. 回车后焦点跳到另一个输入控件
<input id=”txt1″ type=”text” onkeypress=”return focusNext(this,’txt2’,event)”>
<input id=”txt2″ type=”text”>

function focusNext(form,name,evt){
evt = (evt) ? evt : event;
var c = (evt.charCode) ? evt.charCode : evt.keyCode;
if(c == 13 || c == 3){
form.elements[name].focus();
return false;
}
else return true;
}

8. 使某一控件不可用
document.myForm.myElement.disabled = true;

9.隐藏 /显示某一控件
document.myForm.myElement.style.display = ”block”; //显示
document.myForm.myElement.style.display = ”none”; // 隐藏

10.控制下拉框
//清空下拉框中的项
document.myForm.mySelect.options.length = 0;

// 添加下拉框中的项
var item = new Option(“myText”,”myValue”);
document.myForm.mySelect.add(item);

// 获取下拉框当前选中的值
var val = document.myForm.mySelect.value;

//———————————————————————–

· 事件( Event )
1.事件介绍:
onabort     //当用户阻止发送图片至客户端时触发
onblur      // 当控件失去焦点时触发
onchange    //当控件失去焦点并且内容发生了改变时触发
onclick     // 当用户点击某控件时触发
ondblclick  //当用户双击某控件时触发
onerror     //当执行某脚本发生异常时触发
onfocus     //当某控件获得焦点时触发
onkeydown   //当用户按下键盘某个键时触发
onkeypress  //当用户按下并松开键盘某个键时触发
onkeyup     //当用户松开键盘某个键时触发
onload      //用页面被加载完成后触发
onmousedown //当用户按下鼠标时触发
onmousemove // 当用户移动鼠标时触发
onmouseout  //当用户将鼠标移出某控件时触发
onmouseover //当用户将鼠标移入某控件时触发
onmouseup   //当用户松开鼠标时触发
onmove      //当用户移动浏览器窗口时触发
onreset     //当用户点击表单”重置”按钮时触发
onresize    //当用户改变浏览器窗口的大小时触发
onselect    //当用户选中文本框内容时触发
onsubmit    //当用户点击表单”提交”按钮时触发
onunload    //当用户关闭浏览器时触发

//以下为IE独有的方法
onbeforecopy    // 当用户使用”复制”功能前触发
onbeforecut     //当用户使用”剪切”功能前触发
onbeforepaste   // 当用户使用”粘贴”功能前触发
onbeforeprint   //当用户使用”打印”功能前触发
oncontextmenu   // 当用户调出上下文菜单时触发
oncopy          //当用户使用”复制”功能时触发(未复制)
oncut           // 当用户使用”剪切”功能时触发(未剪切)
ondrag          //当用户拖动某控件前触发
ondragend       // 当用户拖动某控件后触发
ondragenter     //当用户拖动某控件到当前控件上面后触发
ondragleave     // 当用户将某控件拖出当前控件时触发
ondragover      //当用户将某控件拖出当前控件上面时触发
ondrop          // 当用户将某控件拖到当前控件后触发

2.浏览器事件兼容性
function funName(evt){
evt = (evt) ? evt : event;
if(evt){ //to do something }
}

3. 动态为控件添加事件
document.getElementById(“myControl”).addEventListener(“click”,funName,false);
document.getElementById(“myControl”).onclick = funName;

4. 页面加载后调用某函数
<body onload=”funName(); funName2();”>
window.onload = funName;

5. 确定与点击事件相匹配的事件
//9.3和9.4 比较复杂.且不清楚事件是JS API还是自定义的

6.防止重复执行两次点击事件
//当第一次点击按钮后,将表单提交回服务器,然后submitForm()函数便指向blockIt()函数.
// 除非页面重新加载..否则点击无效(无作用)
<input type=”button” value=”提交” onclick=”submitForm()”>
function submitForm(){
document.forms["myForm"].submit();
submitForm = blockIt;
reutrn false;
}
function blockIt(){
return false;
}

7. 阻止用户点击鼠标右键或中键
function myFun(evt){
evt = (evt) ? evt : event;
if(evt.button || evt.button == 1 || evt.button == 2){ return false; }
else{ //do something }
}

8. 阻止用户键入某些字符
function myFun(evt){
evt = (evt) ? evt : event;
var c = (evt.charCode) ? evt.charCode : evt.keyCode;
if(c < 48 || c > 57){ return false; }
else reutrn true;
}

9. 获取当前鼠标指向的对象
function myFun(evt){
evt = (evt) ? evt : event;
var elem = (evt.target) ? evt.target : evt.srcElement;
//do something
}

10. 特殊功能键
evt.ctrlKey evt.altKey evt.shiftKey

11.播放媒体文件
<object id=”hiPing” width=”1″ height=”1″
classid=”CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95″ codebase=”#Version=6,0,0,0″>
<param name=”FileName” value=”hi.wav”>
<param name=”AutoStart” value=”false”>
</object>

function playSound(id){
if(document.all[id].FileName){ document.all[id].Play(); }
}

//———————————————————————–

· 页面导航
1.跳转至另一个页面
location = ”newPage.html”;
location.href = ”newPage.html”;

2. 不记录历史记录的页面跳转
location.replace(“newPage.html”);

3.利用下拉框跳转页面
<select name=”chooser” id=”chooser” onchange=”redirect()”>
<option value=”">Choose a Destination:</option>
<option value=”index.html”>Home</option>
<option value=”products.html”>Products</option>
<option value=”support.html”>Support</option>
<option value=”contact.html”>Contact Us</option>
</select>

function redirect(){
var t = document.all.chooser.value;
if(t){ location = t; }
}

4. 利用Cookies保存用户数据
<body onunload=”saveData()”> //要保存数据的页面
<body onload=”readData()”& gt; //新页面

function saveData(){
var data = document.forms[0].userName.value;
var expDate = getExpDate(180, 0, 0);
setCookie(“userName”, data, expDate);
}

function readData( ) {
var data = getCookie(“userName”);
document.forms[0].userName.value = data;
}

5. 利用URL来保存用户数据
function goNext(url){
var data = document.forms[0].userName.value;
location.href = url + ”?” + escape(data);
}

function readData( ) {
var srchString = unescape(location.search.substring(1, location.search.length));
if (srchString.length > 0){ document.forms[0].userName.value = srchString; }
}

6. 创建一个自定义右键菜单
//菜单就自己画了,这里只说方法
function initContextMenus(){
if (document.body.addEventListener){
document.body.addEventListener(“contextmenu”, showContextMenu, true);
document.body.addEventListener(“click”, hideContextMenus, true);
}
else {
document.body.oncontextmenu = showContextMenu;
}
setContextTitles( );
}

//———————————————————————–

· 管理样式 ( CSS )
1.三种嵌入样式表的方法:
//在头部统一声明样式
<style type=”text/css”> body{ font-size:9pt; } </style>

// 从外部嵌入一样式表文件
<link rel=”stylesheet” type=”text/css” href=”myStyleSheet.css”>

// 直接在元素属性里定义
<p style=”font-size:9pt”></p>

2. 分配样式规则给某一元素
<style type=”text/css”>
<!– tagName {styleProperty1:value1; styleProperty2:value2; …} –>
</style>

3. 自定义一种样式供一类元素使用
.myStyle { font-size:9pt; }
<p class=”myStyle”></p>

4. 自定义一种样式供单一元素使用
#myId { font-size:9pt; }
<p id=”myId”></p>

5. 页面加载后动态修改页面样式表链接
<link id=”basicStyle” rel=”stylesheet” type=”text/css” href=”styles.normal.css”>
document.getElementById(“basicStyle”).href = ”newstyle.css”;

6. 打开/关闭某个样式表
document.styleSheets[1].disabled = false;

7. 动态设置/更改某一元素的样式
document.getElementById(“myElement”).className = ”myStyle”;

8. 元素样式的优先级
//原则上来讲,浏览器会使用最后的一种样式(就近原则)
//当同时给一元素设置id和class两种样式时,id的样式优先于class
//当同时给一元素设置class和style两种样式时,style优先于class
// 当同时给一元素设置style和id两种样式时,style优先于id
<style>
.myStyle { font-size:10pt; }
#myId { font-size:11pt; }
</style>
<p id=”myId” class=”myStyle” style=”font-size:12pt”>123</p>

//———————————————————————–

· 动态更改对象的视觉效果
1.更改对象的字体样式
document.getElementById(“myElement”).style.color = ”#EEEEEE”;

// 相应的属性
color : 字体的颜色
font : 字体的全局设置
fontf : 字体名称
fontSize : 字体大小(pt, px)
fontStretch : 字符间隔(px)
fontStyle : 字体的样式 (normal, italic)
fontVariant : 字母大小常量(normal, small-caps)
fontWeight : 字体粗细(bold, bolder, lighter, normal)
textDecoration : 字体装饰 (blink, line-through, none, overline, underline)
textTransform : 字母大小写(capitalize, lowercase, none, uppercase)

2.更改页面背景样式
document.body.background = ”url(bg.gif) repeat fixed”;

// 相应的属性
background : 背景的全局设置
backgroundAttachment : 背景是否随滚动条滚动而滚动(fixed, scroll)
backgroundColor : 背景颜色
backgroundImage : 背景图片
backgroundPosition : 背景图片的位置 (bottom, center, left, right, top)
backgroundRepeat : 背景图片是否重复或拉伸 (no-repeat, repeat, repeat-x, repeat-y)

3.显示/隐藏某对象
document.getElementById(“myElement”).style.visibility = ”hidden”;
document.getElementById(“myElement”).style.display = ”none”;

4. 细调对象的透明度
document.getElementById(“myElement”).style.filter = ”alpha(opacity=80)”;

//———————————————————————–

· 布置HTML对象的位置
1.动态更改对象的位置
<div id=”myDiv” style=”position:absolute; left:100px; top:100px”>Content Here</div>
document.getElementById(“myDiv”).style.top = ”200px”;

2. 设置对象在页面上的层次关系
//值越大对象越前面
document.getElementById(“myElement”).style.zIndex = 123;

//———————————————————————–

· 动态创建内容
1.页面加载时动态创建内容
<p>现在是：<script>var d = new Date(); document.write(d.toLocaleTimeString());& lt;/script></p>

2.动态重画页面
<input type=”text” id=”txtName”& gt;<input type=”button” value=”确定” onclick=”rewritePage()”>
<scritp>
function rewritePage(){
var user = document.getElementById(“txtName”).value;
var html = ”& lt;html><head><title>欢迎</title></head>”;
html += ”& lt;body>欢迎您！” + user + ”</body></html>”;
document.write(html);
document.close();
}
</script>

四 16