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的话是无法监听到输入法输入的文本变 ...
随机推荐
- 转载 CoreCLR源码探索(七) JIT的工作原理(入门篇)
转载自:https://www.cnblogs.com/zkweb/p/7687737.html 很多C#的初学者都会有这么一个疑问, .Net程序代码是如何被机器加载执行的? 最简单的解答是, C# ...
- mybatis plus框架的@TableField注解不生效问题总结
一.问题描述 最近遇到一个mybatis plus的问题,@TableField注解不生效,导致查出来的字段反序列化后为空 数据库表结构: CREATE TABLE `client_role` ( ` ...
- kafka 事务代码实现(生产者到server端的事务)
kafka的事务指的是2个点 ① 生产者到kafka服务端的事务保障 ②消费者从kafka拉取数据的事务 kafka提供的事务机制是 第①点, 对于第②点来说 只能自己在消费端实现幂等性. ...
- Qt：QUrl构造时的qrc前缀
参考(按对我帮助从大到小排列): Qt内的各种路径(让人迷惑) - 鬼谷子com - 博客园 qt webengineview 加载本地资源方式 - beautifulday - 博客园 (17条消息 ...
- docker学习笔记（1）——ubuntu16.04安装docker（含如何彻底卸载docker，docker拉取镜像失败解决）
参考博客: 1.官网教程:https://docs.docker.com/engine/install/ 根据本机不同的信息选择不同的安装方式: https://docs.docker.com/ ...
- if 、whitch、for、while
if 用于过程的判断 whitch用于值得判断 if { } else if { } else if //当此前的过程满足条件时,程序便不再判断其他过程,但是if{}if{}这样的写法程序会将每个过 ...
- netty系列之:NIO和netty详解
目录 简介 NIO常用用法 NIO和EventLoopGroup NioEventLoopGroup SelectorProvider SelectStrategyFactory RejectedEx ...
- tensorflow源码解析之common_runtime-executor-下
目录 核心概念 executor.h Executor NewLocalExecutor ExecutorBarrier executor.cc structs GraphView ExecutorI ...
- 七天接手react项目 —— state&事件处理&ref
state&事件处理&ref 在 react 起步 一文中,我们学习了 react 相关知识:jsx.组件.props.本篇将继续研究 state.事件处理和ref. state St ...
- 01 简介 如何高效的学习Java
JavaSE 千寻简学习笔记 简介 TIOBE:编程语言排行榜 官网:https://hellogithub.com/report/tiobe/ 如何高效的学习Java 多写(代码)多写(笔记)多写( ...