`
guoyiqi
  • 浏览: 1010195 次
社区版块
存档分类
最新评论

js动态设置input 只读，无边框效果

 
阅读更多

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<STYLE>
.output-body{readonly:expression(this.readOnly=true);border:0px;}
</STYLE>
</HEAD>

<BODY>
<input type="text" id="test">
<script>
document.getElementById("test").className="output-body";
</script>
</BODY>
</HTML>

分享到：
| 堆栈 介绍
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    怎样通过disabled和readonly将input设置为只读效果.docx

    setInput 只读效果实现方法 Disabled 和 Readonly 是两种常见的方法来实现 Input 只读效果，它们均可以使 Input 变为不可编辑状态，但它们之间存在着重要的区别。 Disabled 方法 Disabled 属性用于指定 Input ...

    通过disabled和readonly将input设置为只读效果

    在HTML表单设计中，有时候我们需要用户只能查看输入框（input）中的内容而不能修改，这时我们可以使用`disabled`和`readonly`属性来实现只读效果。这两种属性虽然都能达到表面的只读目的，但它们在功能上存在显著...

    js动态修改input输入框的type属性及验证Email

    本文将深入探讨如何使用JavaScript动态修改`input`输入框的`type`属性，并介绍如何进行Email验证。 `type`属性是`input`标签的一个关键属性，它决定了输入框的行为和外观。默认情况下，`input`元素的`type`可能是`...

    elementUI 设置input的只读或禁用的方法

    总结一下，在Element UI中，设置input的只读状态通常是在组件中添加一个readonly属性，而设置禁用状态则需要在data中定义一个布尔值变量，并通过动态绑定的方式将其应用到:disabled属性上。当需要解除input的禁用...

    怎样让input type=file 只读，并能实现文件上传

    2. **设置只读属性**：由于 HTML `&lt;input type="file"&gt;` 并没有内置的 `readOnly` 属性，因此我们需要通过其他方式来模拟只读效果。 下面是一个简单的实现示例： ```javascript document.getElementById('...

    js中动态加载div/input....

    总结起来，JavaScript动态加载HTML元素是Web开发中的基础技能，它结合了元素创建、属性设置、DOM操作、数据交互等多个方面。在实际项目中，这种技术常用于动态表单、实时更新的数据显示、用户交互反馈等多种场景。...

    js控制input框只读实现示例

    总结，这个示例展示了如何使用JavaScript动态地改变HTML input框的只读状态，以及如何通过CSS改变只读状态下的样式，以提高用户体验。在实际的网页开发中，这种功能可以应用于诸如显示预设数据、防止意外修改等情况...

    input输入框删除文字效果js代码

    总结来说，这个“input输入框删除文字效果js代码”通过HTML创建了输入框和删除按钮，CSS提供了视觉效果，而JavaScript实现了动态交互。这个简单的例子展示了如何结合这三个技术来提升网页的用户体验，是前端开发者...

    Vue动态控制input的disabled属性的方法

    有时候会有这样的需求，新增的时候可以输入，但是无法修改，此时就需要通过控制input标签的disabled属性来实现，那vue是如何动态设置input输入框的disabled属性的呢？ 输入框的html源代码 配置项 v-bind:disabled=...

    js-input输入框提示语

    综上所述，`js-input输入框提示语`是前端开发中的基本需求，通过HTML的`placeholder`属性结合JavaScript的动态操作，可以实现丰富的提示语功能，提高用户交互体验。在实际开发中，还需要考虑到兼容性和用户体验，...

    JSP中使用JavaScript动态插入删除输入框实现代码.docx

    JSP中使用JavaScript动态插入删除输入框实现代码 JSP（Java Server Pages）是一种基于Java技术的服务器端脚本语言，主要用于生成动态网页内容。JavaScript则是一种客户端脚本语言，主要用于实现网页的交互功能。在...

    js点击连续添加input输入框并且判断值

    在JavaScript编程中，"js点击连续添加input输入框并且判断值"这个功能是常见的动态表单构建场景。这种技术常用于需要用户输入不确定数量信息的情况，例如购物网站的商品添加、在线问卷调查等。下面我们将详细讲解...

    用js设置下拉框为只读的小技巧

    接下来，我们编写JavaScript代码来实现只读效果： ```javascript /* 根据页面上span的id设置select为只读 */ function selectReadOnly(selectedId) { var obj = document.getElementById(selectedId); obj....

    js获取 input file 图片立即显示

    "js获取input file 图片立即显示"这个话题就是关于如何利用JavaScript来实现在用户选择图片后即时预览的功能。以下是一个详尽的步骤解释和相关知识点： 1. **HTML 结构**： 首先，我们需要在HTML页面中创建一个`...

    java中js代码删除input框

    标题“java中js代码删除input框”表明我们要讨论的是如何使用JavaScript来删除一个HTML中的input元素。在描述中提到，当用户点击“删除”按钮时，会触发一个JavaScript方法，这个方法将负责删除指定的input框。 ...

    JavaScript获取,设置光标位置,兼容InputTextArea

    在JavaScript编程中，获取和设置光标位置是常见的需求，特别是在与用户交互的表单元素如`&lt;input&gt;`和`&lt;textarea&gt;`中。这涉及到DOM（文档对象模型）操作和事件处理，对于创建动态和响应式的网页应用至关重要。本文将...

    jQuery/JS监听input输入框值变化实例

    例如，演示了如何利用oninput事件监听输入框的实时输入，并根据输入内容动态更新页面上的其他元素。同时，使用jQuery绑定了oninputpropertychange事件，显示了在输入过程中实时获取输入框长度，并根据输入值是否存在...

    javascript input自动赋值

    在上述例子中，无论使用原生JavaScript还是jQuery，我们都是通过获取input元素并设置其value属性来实现自动赋值的。这种方法对于动态页面尤其有用，比如从服务器获取数据后填充表单，或者根据用户的行为改变输入框的...

Magicbox
Global site tag (gtag.js) - Google Analytics