一.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>

三.总结

  1. 此方法不一定适用于所有人,所有环境,这是我找了5种以上的方法才写出来的,可能在他人的电脑不一定奏效
  2. readonly后面的值最好也是要readonly,当然用true也可以,不过调成false可是不会取出只读的效果
  3. removeAttr()同样是找了很久才找到的删除input标签上属性的一种方案,应用范围很广!!!
  4. 我这里只用了以Name为点来写,可以变化思维,ID同样奏效

js技术之input只读功能可以通过js设置readonly的更多相关文章

  1. js实现复制 、剪切功能-clipboard.min.js 示例

    html: <div id="txt">我是要复制的内容</button> <button id="copyBtn">点击复 ...

  2. 大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app

    大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app ( 本文内容为melodyWxy原作,git地址:https://github.com/melodyWx ...

  3. APNs功能之Node.js和Mysql应用总结

    APNs功能之Node.js和Mysql应用总结 这篇文档主要是总结Node.js和Mysql的学习心得体会.当然也可以看作是此前所写的消息推送服务的续篇. 简单描述下应用背景,我们的应用需要实现苹果 ...

  4. js技术之拖动table标签

    一.js技术之拖动table标签 起因:前几天公司,突然安排一个任务 任务描述:要求尺码table列表要像Excel表中一样可以直接移动整行尺码到任意行位置 技术点:采用ui的sortable技术来h ...

  5. 【转】js实现复制到剪贴板功能,兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  6. 【原】js实现复制到剪贴板功能,兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  7. 黄聪:JS实现复制到剪贴板功能,兼容所有浏览器(转)

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  8. JS实现Web网页打印功能(IE)

    问题描述:     JS实现Web网页打印功能 问题解决:     这里主要使用WebBrowser控件的ExeWB在IE中打印功能的实现 WebBrowser介绍:         WebBrows ...

  9. js监听input等表单输入框的变化事件oninput

    js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...

随机推荐

  1. svn问题总结

    有问题先尝试右键刷新,或clean up svn图标不显示 解决办法:打开注册表regedit,HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\Curren ...

  2. maven配置本地仓库和远程仓库

    配置本地仓库 修改maven安装目录下conf/settings.xml,也可以在idea配置中覆盖 <localRepository>E:\maven\MavenRepository&l ...

  3. redis面试1-33

    目录 1.Redis你比较熟吧,说说它机制为什么快? 2.redis是单线程吗? 3.为什么redis需要把所有数据放到内存中? 4.Redis的回收策略有哪些? 5.MySQL里有2000w数据, ...

  4. 通过对比语法差异,让会JAVA的你快速学会Kotlin的开源宝藏项目

    今天有个小伙伴来问TJ君,说自己JAVA用的贼溜,想再学习下Kotlin,问TJ君上手难不难? 怎么说呢?其实TJ君一直觉得语言这方面,是触类旁通.一通百通的,既然JAVA已经贼溜了,想必学其他的语言 ...

  5. QT之HTTP

    概述 QT的HTTP操作都是异步的,内部通过线程实现. 相关类: QNetworkAccessManager [发送网络请求并接收响应] QNetworkReply [服务响应] QNetworkRe ...

  6. vue项目环境搭建(webpack4从零搭建)--仅个人记录

    一.nodejs环境搭建 首先需要下载node.js(推荐直接官网找最新的版本),下载完成后会自带npm包管理工具,打开cmd命令行界面,输入npm -v .node -v检查node.js与npm是 ...

  7. github通过token提交代码

    github通过token提交代码 生成token 个人头像->Setttings->Developer settings->Personal access tokens->G ...

  8. Wordpress Calendar Event Multi View < 1.4.01 反射型xss漏洞(CVE-2021-24498)

    简介 WordPress是Wordpress基金会的一套使用PHP语言开发的博客平台.该平台支持在PHP和MySQL的服务器上架设个人博客网站.WordPress 插件是WordPress开源的一个应 ...

  9. python 关于heapq模块的随笔

    heapq模块提供了很多高级功能可以通过help(heapq)查看详细文档: 要点: 1优先级队列让我们可以按照重要程度来处理元素,而不是先进先出 2使用heapq可以应对长列表,因为heap不是复杂 ...

  10. mybatis的几种like查询

    oracle数据库: Java代码 SELECT * FROM user WHERE name like CONCAT('%',#{name},'%') 或 Java代码 SELECT * FROM ...