js技术之input只读功能可以通过js设置readonly
一.input标签
输入项标签,不同type属性,会有不同的显示效果和不同的作用
input标签的属性:
disabled:表单项禁用,不可修改值,也不会被提交
readonly:表单项只读,不可修改值,但会被提交
二.案例
根据Name来获取并设计(本人使用)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!--显示获取的1值 并且 设置input权限为只读-->
<input type="button" value="只读/可写" onclick="autoGain()">
<!--作用框,用于实现效果-->
<input type="text" name="wzwName" readonly="readonly">
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>
<script type="text/javascript">
// 只读/可写 切换单机事件方法
function autoGain() {
// 获取input中的值
var val = $("input[name='wzwName']").val();
// 如果等于1说明已经设置为只读模式了
if(val == 1)
{
// 将只读模式删除
$("input[name='wzwName']").removeAttr("readonly");
}else{
// 添加只读模式到input框中并设置value值为1
$("input[name='wzwName']").val("1").attr("readonly","readonly");
}
}
</script>
</html>
根据id来获取并设计
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function switchUser() {
var usernameEl = document.getElementById("username");
const beforeVal = usernameEl.getAttribute("readonly");
console.log("切换前状态:" + getStatus(beforeVal));
if (beforeVal === null) {
usernameEl.setAttribute("readonly", "readonly");
} else {
usernameEl.removeAttribute("readonly");
}
const afterVal = usernameEl.getAttribute("readonly");
console.log("切换后状态:" + getStatus(afterVal));
} function getStatus(readonlyVal) {
if (readonlyVal === null) {
return "读写"
} else {
return "只读"
}
}
</script>
</head>
<body> 用户名:<input type="text" id="username" name="username"><br>
<button onclick="switchUser()">切换用户名readonly属性</button> </body>
</html>
三.总结
- 此方法不一定适用于所有人,所有环境,这是我找了5种以上的方法才写出来的,可能在他人的电脑不一定奏效
- readonly后面的值最好也是要readonly,当然用true也可以,不过调成false可是不会取出只读的效果
- removeAttr()同样是找了很久才找到的删除input标签上属性的一种方案,应用范围很广!!!
- 我这里只用了以Name为点来写,可以变化思维,ID同样奏效
js技术之input只读功能可以通过js设置readonly的更多相关文章
- js实现复制 、剪切功能-clipboard.min.js 示例
html: <div id="txt">我是要复制的内容</button> <button id="copyBtn">点击复 ...
- 大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app
大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app ( 本文内容为melodyWxy原作,git地址:https://github.com/melodyWx ...
- APNs功能之Node.js和Mysql应用总结
APNs功能之Node.js和Mysql应用总结 这篇文档主要是总结Node.js和Mysql的学习心得体会.当然也可以看作是此前所写的消息推送服务的续篇. 简单描述下应用背景,我们的应用需要实现苹果 ...
- js技术之拖动table标签
一.js技术之拖动table标签 起因:前几天公司,突然安排一个任务 任务描述:要求尺码table列表要像Excel表中一样可以直接移动整行尺码到任意行位置 技术点:采用ui的sortable技术来h ...
- 【转】js实现复制到剪贴板功能,兼容所有浏览器
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
- 【原】js实现复制到剪贴板功能,兼容所有浏览器
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
- 黄聪:JS实现复制到剪贴板功能,兼容所有浏览器(转)
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
- JS实现Web网页打印功能(IE)
问题描述: JS实现Web网页打印功能 问题解决: 这里主要使用WebBrowser控件的ExeWB在IE中打印功能的实现 WebBrowser介绍: WebBrows ...
- js监听input等表单输入框的变化事件oninput
js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...
随机推荐
- svn问题总结
有问题先尝试右键刷新,或clean up svn图标不显示 解决办法:打开注册表regedit,HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\Curren ...
- maven配置本地仓库和远程仓库
配置本地仓库 修改maven安装目录下conf/settings.xml,也可以在idea配置中覆盖 <localRepository>E:\maven\MavenRepository&l ...
- redis面试1-33
目录 1.Redis你比较熟吧,说说它机制为什么快? 2.redis是单线程吗? 3.为什么redis需要把所有数据放到内存中? 4.Redis的回收策略有哪些? 5.MySQL里有2000w数据, ...
- 通过对比语法差异,让会JAVA的你快速学会Kotlin的开源宝藏项目
今天有个小伙伴来问TJ君,说自己JAVA用的贼溜,想再学习下Kotlin,问TJ君上手难不难? 怎么说呢?其实TJ君一直觉得语言这方面,是触类旁通.一通百通的,既然JAVA已经贼溜了,想必学其他的语言 ...
- QT之HTTP
概述 QT的HTTP操作都是异步的,内部通过线程实现. 相关类: QNetworkAccessManager [发送网络请求并接收响应] QNetworkReply [服务响应] QNetworkRe ...
- vue项目环境搭建(webpack4从零搭建)--仅个人记录
一.nodejs环境搭建 首先需要下载node.js(推荐直接官网找最新的版本),下载完成后会自带npm包管理工具,打开cmd命令行界面,输入npm -v .node -v检查node.js与npm是 ...
- github通过token提交代码
github通过token提交代码 生成token 个人头像->Setttings->Developer settings->Personal access tokens->G ...
- Wordpress Calendar Event Multi View < 1.4.01 反射型xss漏洞(CVE-2021-24498)
简介 WordPress是Wordpress基金会的一套使用PHP语言开发的博客平台.该平台支持在PHP和MySQL的服务器上架设个人博客网站.WordPress 插件是WordPress开源的一个应 ...
- python 关于heapq模块的随笔
heapq模块提供了很多高级功能可以通过help(heapq)查看详细文档: 要点: 1优先级队列让我们可以按照重要程度来处理元素,而不是先进先出 2使用heapq可以应对长列表,因为heap不是复杂 ...
- mybatis的几种like查询
oracle数据库: Java代码 SELECT * FROM user WHERE name like CONCAT('%',#{name},'%') 或 Java代码 SELECT * FROM ...