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的话是无法监听到输入法输入的文本变 ...
随机推荐
- Python：Scrap爬虫过程中遇到的各种错误
1.KeyError: 'Spider not found: BDS' 原因:settings.py中缺少了几项与spider名字配置相关的项: BOT_NAME = 'BDS' SPIDER_MOD ...
- C/C++字符串反转的N种方法
0x00 自己写一个 // 第一种 std::string reverse(std::string str) { std::string res(""); for (int i = ...
- c语言——uthash使用
参考:https://troydhanson.github.io/uthash/userguide.html https://blog.csdn.net/lovemust/article/detail ...
- CSDN中Markdown编辑器使用方法
Markdown编辑器 如果想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识. 新的改变 CSDN中Markdown编辑器进行了一些功能拓展与语法支 ...
- 二进制部署1.23.4版本k8s集群-6-部署Node节点服务
本例中Master节点和Node节点部署在同一台主机上. 1 部署kubelet 1.1 集群规划 主机名 角色 IP CFZX55-21.host.com kubelet 10.211.55.21 ...
- 解决vue单页面应用做微信JSSDK注入权限时出现“invalid signature”（ios端）
--都说微信开发多坑,没想到遇到一个天坑. 在做一个vue项目时,要用到微信JS-SDK,官方文档详见:https://developers.weixin.qq.com/doc/offiaccount ...
- LGP6667题解
既然看到了这道"板子",那还是来写一下题解吧... 如果有机会希望能推一下 载谈binominial sum 的做法. \[\sum_{k=0}^nf(k)\binom n kx^ ...
- 拉普拉斯特征映射（Laplacian Eigenmaps）
1 介绍 拉普拉斯特征映射(Laplacian Eigenmaps)是一种不太常见的降维算法,它看问题的角度和常见的降维算法不太相同,是从局部的角度去构建数据之间的关系.也许这样讲有些抽象,具体来讲, ...
- WinDbg调试托管程序环境问题总结
基本环境搭建及安装 安装 有2个方式可以安装WinDbg. 新版 安装WinDbg Preview 在商店里搜WinDbg直接就可以安装,这里安装的版本是x64版本.x64版本的WinDbg其实是可以 ...
- C++设计模式 - 迭代器模式（Iterator）
数据结构模式 常常有一-些组件在内部具有特定的数据结构,如果让客户程序依赖这些特定的数据结构,将极大地破坏组件的复用.这时候,将这些特定数据结构封装在内部,在外部提供统一的接口,来实现与特定数据结构无 ...