javascript鼠标点入input内value值隐藏事件

最新推荐文章于 2023-02-27 11:57:36 发布
最新推荐文章于 2023-02-27 11:57:36 发布
阅读量915 收藏
点赞数
文章标签： javascript input function xhtml html
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>鼠标事件</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js">
        </script>
        <!--
        <script type="text/javascript">
        //jQuery方法
        $(document).ready(function(){
        oElement = $("#myinput");
        //聚焦时间、鼠标点击的时候触发聚焦时间
        oElement.focus(function(){
        if (this.value == "请输入关键字") {
        this.value = "";
        }
        });
        //聚焦时间、鼠标移开的时候触发聚焦时间
        oElement.blur(function(){
        if (this.value == "") {
        this.value = "请输入关键字";
        }
        });
        })
        </script>
        -->
        
        <!--
        <script type="text/javascript">
        //javascript方法1、需要在标签内部添加焦点事件
        function hidev(){
        oe=document.getElementById("myinput");
        if(oe.value=="请输入关键字") oe.value="";
        }
        function disv(){
        oe=document.getElementById("myinput");
        if(oe.value=="") oe.value="请输入关键字";
        }
        </script>
        -->
        
        
        <script type="text/javascript">
            //javascript方法2
            function dValue(){
                oe = document.getElementById("myinput");
                oe.onfocus = function(){
                    if (this.value == "站内搜索")
                        this.value = "";
                };
                oe.onblur = function(){
                    if (this.value == "")
                        this.value = "站内搜索";
                }
            }
            window.onload = dValue;
        </script>
    </head>
    <body>
        <input type="text" id="myinput" value="站内搜索" size="35"/>
    </body>
</html>
carrie_tc
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
10-29
本篇将详细讲解如何使用jQuery来实现在表单`input`中的提示文字随鼠标焦点移进移出而显示或隐藏的功能。 首先，我们需要在HTML中设置表单的基本结构。通常，每个`input`元素会有一个默认的`value`属性，这个属性的...
jQuery鼠标滚动设置input值特效代码
03-20
4. **防止页面滚动**：默认情况下，鼠标的滚轮事件不仅会影响input的值，还会导致页面上下滚动。为了阻止这种行为，你需要在事件处理函数中使用`event.preventDefault()`： ```javascript $("#yourInputID").on(...
html 隐藏input value值,HTML Input Hidden value用法及代码示例
weixin_33826994的博客
06-03 2808
HTML DOM中的“输入隐藏的值”属性用于设置或返回隐藏的输入字段的value属性的值。 value属性定义输入隐藏字段的默认值。用法:它返回value属性。hiddenObject.value用于设置value属性。hiddenObject.value = text属性值：此属性包含单个值文本，该文本用于指定输入隐藏值的初始值。返回值：它返回一个字符串值，该值表示隐藏输入字段的value属性的...
input值不可变、隐藏input(表单隐藏域)
CV_Di的博客
01-25 4102
input标签值不可变、隐藏标签一、值不可变方法1:readonly方法2:disabledreadonly 和 disabled的区别：二、隐藏\标签(表单隐藏域) 一、值不可变 在写前端页面时，有时候我们需要让<input>标签只能看，但不能更改，就行银行卡号之类的。 那么这个时候就需要让标签的值不可变了，让标签值不可变的方法有两种(readonly，disabled)。 方法1:readonly <form action="#"> <h4>方式一:reado
input框里边显示隐藏vaule内容
sinat_35539553的博客
06-22 453
<input type="text" value="手机"> <script> var text=document.querySelector('input'); text.onfocus=function(){ if(this.value=="手机"){ this.value=""; } } text.onb..
input获取焦点时候value值隐藏，失去焦点的时候显示
QTFYING的博客
11-09 6921
我们经常在开发过程中会遇到这样的问题，就是当我们给input添加一个value值时候，会覆盖掉placeholder，但是当我们去修改的时候呢，她本身呢又不会自动的消失，这时候input的另外两个属性就可以派上用场了，获取焦点事件和失去焦点事件： input type="text" onfocus="javascript:this.value=''" onblur="javas
input的各种事件
dream_sail_的博客
09-30 1372
1.onfocus 当input 获取到焦点时触发 2.onblur 当input失去焦点时触发，注意：这个事件触发的前提是已经获取了焦点再失去焦点的时候才会触发该事件，用于判断标签为空。 3.onchange 当input失去焦点并且它的value值发生变化时触发，个人感觉可以用于注册时的确认密码。 4.onkeydown 按下按键时的事件触发， 5.onkeyup 当按键抬起的时候触发的事件，在该事件触发之前一定触发了onkeydown事件–相当于一个按键，两个事件，没怎么用过 6.onclick
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
12-13
JavaScript还支持许多其他事件，例如`mouseover`（鼠标移入）、`mouseout`（鼠标移出）、`mousedown`（鼠标按钮按下）、`mouseup`（鼠标按钮释放）等。此外，还有一些更高级的事件，如拖放事件（drag and drop ...
模拟用户操作Input元素，不会触发相应事件
12-09
在JavaScript编程中，输入元素（Input）是网页交互的核心组件之一，它们通常用于收集用户输入的数据。然而，有一个重要的规则需要...在编写涉及用户交互和事件处理的JavaScript代码时，这些知识点是非常基础且关键的。
关于js中的鼠标事件总结
12-12
js中鼠标事件主要有onclick，onmousedown，onmouseup，oncontextmenu，ondblclick,所有的这些事件都包含有一个事件对象event，当然在IE低版本下，event对象是挂在window底下的。这个我们另行讨论。 1.通过html添加...
改变隐藏的input中value值的方法
09-04
主要介绍了改变隐藏的input中value值的方法,需要的朋友可以参考下
input hidden(隐藏域)传值例子
07-29
NULL 博文链接：https://tianjun309.iteye.com/blog/819214
input输入框的原生事件
m0_56683897的博客
12-09 3526
输入框内容发生变化时触发。(值得注意的是，change事件仅在文本域有效，包括textarea，select)输入框的value值发生变化时就会触发，与change不同，input不用等到失去光标时便会触发。当使用拼音输入法开始输入汉字，文本段落的组成完成或取消时触发。失去焦点，鼠标光标焦点从输入框内移除，不能再输入内容后触发。当使用拼音输入法开始输入汉字，字符被输入到文字时。当使用拼音输入法开始输入汉字时触发。聚焦，鼠标光标聚焦在输入框内时触发。点击事件，鼠标点击输入框时触发。
js获取到隐藏input的值以及js自执行函数
weixin_64854388的博客
02-27 952
js获取到隐藏input的值以及js自运行函数
微信小程序 input隐藏和不可操作的设置
v1029179954
04-22 4050
微信小程序input使用
点击input，value值消失
flyqingfei的博客
03-13 9368
这是默认的状态： 这是点击后的状态：
改变隐藏的input中value的值
LzwGlory的专栏
12-30 2727
$("#picTxt").attr("value",picTxt);
给input框加一个鼠标点击变换颜色并清除value值的css代码
最新发布
06-06
您可以使用CSS中的`:focus` 伪类来实现鼠标点击input框时变换颜色的效果，并使用JavaScript来清除input框的value值。以下是一个示例代码： ```html <input type="text" id="myInput"> ``` ```css input:focus { outline: none; /* 取消默认的外边框样式 */ border-color: #7c7cff; /* 修改输入框边框颜色 */ box-shadow: 0 0 5px #7c7cff; /* 添加阴影效果 */ } /* 隐藏清除按钮 */ input::-ms-clear, input::-ms-reveal { display: none; } input::-webkit-clear-button { display: none; } ``` ```javascript const myInput = document.getElementById("myInput"); myInput.addEventListener("focus", function() { this.style.borderColor = "#7c7cff"; this.style.boxShadow = "0 0 5px #7c7cff"; this.value = ""; }); ``` 当用户点击input框时，输入框将失去默认的外边框样式，并将边框颜色和阴影效果修改为您所设定的颜色。同时，JavaScript代码将清除input框中的value值。另外，CSS代码中的`::-ms-clear`和`::-webkit-clear-button`选择器用于隐藏默认的清除按钮。您可以根据需要修改颜色和阴影效果的数值，以及输入框的id属性值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值