input select textarea

input

例子: 

1.文本框: <input type="text" name="textfield"> 

2.按钮:<input type="submit" name="Submit" value="提交"> 

3. 。。。

 

描述
button 定义可点击按钮(多数情况下,用于通过 JavaScript 启动运行脚本)。
checkbox 定义复选框。
file 定义输入字段和 "浏览"按钮,供文件上传。可以设置accept属性(接受文件类型)
hidden 定义隐藏的输入字段,可以传递参数。
image 定义图像形式的提交按钮,必须结合src属性和alt属性一起使用!
password 定义密码字段。该字段中的字符被掩码。可以设置maxlength(密码最大长度)
radio 定义单选按钮。
reset 定义重置按钮。重置按钮会清除表单中的所有数据。
submit 定义提交按钮。提交按钮会把表单数据发送到服务器(数据会发送到表单的 action 属性中指定的页面)。
text 定义单行文本框,用户可在其中输入文本。默认宽度为 20 个字符,size="20"。

select

建立一个列表/菜单:
<select name="select">
</select>


textarea

建立一个文本宇:
<textarea name="textarea"></textarea>


http://www.cnblogs.com/649460214Cren/archive/2012/12/16/2820899.html

### 解决iOS设备上inputtextarea来回切换时出现的键盘遮挡问题 对于iOS设备上的`<input>`和`<textarea>`元素,在用户快速切换这些输入框时可能会遇到虚拟键盘弹出导致页面布局错乱或输入区域被遮挡的情况。针对这一现象,可以采取以下措施来优化用户体验。 #### CSS样式调整 为了防止iOS浏览器默认行为影响到表单控件的操作体验,可以在对应的CSS定义中增加特定属性: ```css /* 设置可选中文本 */ input, textarea { -webkit-user-select: auto !important; } ``` 此设置允许用户在iOS平台上正常使用选择功能的同时也解决了部分机型存在的无法编辑的问题[^3]。 #### JavaScript事件监听 除了静态样式的修正外,还需要借助JavaScript动态处理视窗大小变化带来的潜在冲突。当检测到软键盘激活状态改变时及时作出响应,确保活动元素始终处于可见区域内: ```javascript // 绑定窗口resize事件以应对键盘弹起引起的尺寸变动 window.addEventListener('resize', function () { const activeEl = document.activeElement; if (activeEl.tagName === 'INPUT' || activeEl.tagName === 'TEXTAREA') { setTimeout(() => { window.scrollTo({ top: activeEl.getBoundingClientRect().top + window.pageYOffset - 20, behavior: "smooth" }); }, 100); } }); ``` 上述脚本会在每次屏幕宽度发生变化(即可能是由于键盘显示/隐藏引起)之后延迟执行一次滚动操作,使当前获得焦点的输入域保持在视野中心位置附近。 #### HTML结构建议 最后,在编写HTML模板时也要注意合理安排各个组件之间的相对关系,避免不必要的嵌套层次过多造成渲染复杂度上升。例如使用如下简化版示例代码片段展示如何构建一个基本的支持自动聚焦特性的多行文本区: ```html <textarea id="test" style="-webkit-user-select:text!important;" contenteditable="true" class="input" placeholder="请输入..." autofocus> </textarea> ``` 通过以上几个方面的综合改进,能够有效缓解乃至彻底消除iOS端因频繁切换不同类型的输入控件而导致视觉干扰的现象。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值