input获得光标时，默认值消失，移出光标，默认值显示

最新推荐文章于 2022-08-05 17:33:03 发布
最新推荐文章于 2022-08-05 17:33:03 发布
阅读量4.5k 收藏 1
点赞数
分类专栏： 笔记—html/js/jquery 文章标签： html js jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012304877/article/details/79731877
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.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>demo</title>
</head>
<style type="text/css">
label {color:#b5b5b5}
</style>
<!--将jquery-1.7.1.min.js文件与当前的这个html文件放入到同一个文件夹内即可-->
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">

//定义一个默认值
var defaultVal = "请先输入商品统一编号，再回车进行查询操作！"; 
//个人理解是，页面加载完成后，会发生 ready 事件
$(document).ready(function(){

//回车事件
$("#seqNo").bind('keydown', function (e) {
//获得键值
       var key = e.which;
//13 为回车键的键值
       if (key == 13) {
//通过文本输入框id,得到这个文本输入框的值
        var seqNo = $("#seqNo").val();
//当前的值不为默认值，并且不为空时，访问后台
    if($.trim(seqNo) != defaultVal && $.trim(seqNo) != ""){
    alert("正在查询，请稍等。。。");
//访问后台
    //window.location.href="findDetail.action?param="+seqNo;
    }else{
//否则提示用户
    alert("请先输入商品统一编号，再进行回车查询操作");
    }
}
   });
}); 

//获得焦点事件，即鼠标光标移动到文本输入框内
function submitFocus(){
var seqNo = $("#seqNo").val();
//将其值与默认值比较，相等时，将文本输入框置空
if($.trim(seqNo) == defaultVal){
$("#seqNo").val("");
}
}

//失去焦点事件，即即鼠标光标从文本输入框内移出
function submitBlur(){
var seqNo = $("#seqNo").val();
//将文本框内的值去空格操作后，等于空时，将默认值设置到文本输入框内
if($.trim(seqNo) == ""){
$("#seqNo").val(defaultVal);
}
}
</script>
</head>
<body>
<label>测试步骤</label><br/>
<label>1 鼠标移到文本输入框内，不输入值，再移出</label><br/>
<label>2 鼠标移到文本输入框内，随意输入值，再移出</label><br/>
<label>3 鼠标移到文本输入框内，不输入值，敲回车键</label><br/>
<label>4 鼠标移到文本输入框内，输入值，敲回车键</label><br/><br/>
<input type="text" style="width:300px;color: #b5b5b5;margin-top: 1px;"
id="seqNo" value="请先输入商品统一编号，再回车进行查询操作！" 
οnfοcus="submitFocus()" οnblur="submitBlur()">
</body>
503214
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
input光标的移动和选中
路漫漫的博客
12-03 2860
方法一 input.setSelectionRange(opsStart,opsEnd); setSelectionRange方法用于设定<input> 或 <textarea> 元素中当前选中文本的起始和结束位置。 当opsStart和opsEnd相同时，可用于定位光标位置。 setSelectionRange实际上是改变了selectionStart 和 selectionEnd属性，所以也可以通过直接修改这两个属性来实现 方法二 input.selectionSt
uniapp中的事件处理器
A_Brave的博客
03-17 1924
左侧为 WEB 事件，右侧为 uni-app 对应事件（原生事件） click: 'tap', // 点击事件 touchstart: 'touchstart', // 手指摸上去触发 touchmove: 'touchmove', // 滑动触发 touchcancel: 'touchcancel', // 当触摸点被中断时会触发 touchcancel 事件，中断方式基于特定实现而有所不同（例如， 创建了太多的触摸点）。 touchend: 'touchend', //
鼠标点击input框后里面的内容就消失
weixin_34313182的博客
03-03 2116
<!DOCTYPE html><html> 　　<head> 　　　　<meta charset="UTF-8"> 　　　　<title>鼠标点击input框后里面的内容就消失</title> 　　</head> 　　<body> 　　　　<input type="text" size=...
uniapp 光标位置 uni-easyinput input nvue vue
翎墨袅
08-05 4386
uniapp 光标位置
个人日记024--jq 获取input光标的所在位置
Dream02_05的博客
10-25 546
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 ...
详解小程序输入框闪烁及重影BUG解决方案
10-18
当在input组件中使用`v-model`时，由于原生小程序的input组件进行了封装，这可能导致光标闪烁的异常现象。为了解决这个问题，我们可以采取以下两种策略： 1. **弃用v-model**： 如果input组件仅用于用户手动输入，...
android开发textview属性详情
03-11
5. android:hintText：设置为空时显示的文字提示信息。 四、图像和背景属性 1. android:drawableBottom：在文本的下方输出一个可绘制对象，例如图片。 2. android:drawableLeft：在文本的左边输出一个可绘制对象...
js实现form自动完成功能
10-30
JavaScript实现的自动完成功能是一种常见的交互设计，用于提高用户在输入表单时的效率和体验。在上述示例中，开发者创建了一个简单的自动填充功能，主要用于在输入特定字段（例如公司名称）时提供匹配的建议。这个...
JavaScript实现的文本框placeholder提示文字功能示例
10-18
在网页开发中，文本框（`<input type="text">`）的`placeholder`属性用于显示提示性文字，当用户输入或聚焦时自动消失。在某些浏览器或旧版本的浏览器中，`placeholder`属性可能不被支持，因此需要通过JavaScript来...
cursor-homework
03-29
1. `auto`：默认值，根据元素的行为自动设置光标，例如链接上为手形，文本上为文本编辑光标。 2. `pointer`：通常用于链接，显示为手形，提示用户点击。 3. `crosshair`：显示为十字准线，常用于需要精确选择的场景...
使用focus方法让光标默认停留在INPUT框
09-04
让光标默认停留在INPUT框中，用focus方法可以实现，下面有个示例代码，需要的朋友可以参考下
文本框光标离开事件：onBlur
Chao Yu - Smile in the Sunshine
07-17 1万+
在输入完成qq号码、微信号码、email、手机号的时候，就去校验，利用文本框的 光标离开事件：onBlur ，在这个事件里写校验重复的程序，把并加入本联系人的id，如果重复，在文本框下面，或者后面用红色字体提示 重复等 信息。 而且不阻止用户的保存联系人信息。//首先用正则表达式判断是否合法，然后，通过Ajax，调用对应的//url，即对应的action的方法，实现数据的前后台的异步交互。根据//
onBlur事件与onfocus事件（js） （光标到达和离开是触发事件）
热门推荐
我的编程之路
05-11 18万+
onFocus事件就是当光标落在文本框中时发生的事件。 onBlur事件是光标失去焦点时发生的事件。 可以编如下例子 1.html 使用onBlur事件处理程序 还有以下例子 2.html 3 04 05 06 07 OnFocus事件 08 09 10 11
JS实现回车光标切换input输入框ant design vue
asunny_的博客
05-31 3416
antd组件实现input输入框回车跳转下一个输入框 实现回车切换光标一般两种思路： 1. 把按下回车变成按下tab(通过修改keyCode，不过我没成功0.0 ) 2. 使用.focus()方法，去自动聚焦到你想跳转的输入框(主要谈一下这个)： 首先使用getElementsByClassName或者getElementsByName方法,获取到所有的输入框，再通过.focus进行跳转 focus()方法使用的两种场景 1. 输入框较少 ​ 较少的时候可以直接指定这个输入框敲击回车后跳转到哪个输入框 2.
html5光标进去默认值消失,html点击input没有出现光标怎么办
weixin_35089715的博客
06-03 935
html点击input没有出现光标的解决办法：首先打开相应的HTML文件；然后用jquery写点击出现光标即可，代码如“$('.inputname, .inputphone').on('touchstart',function...)”。本文操作环境：Windows7系统、HTML5、Dell G3电脑。html5点击input没有出现光标完美解决方案直接自己用jquery 写点击出现光标$('....
JQery鼠标移入，移出触发方法
peterjiajia的专栏
12-17 3395
总结：1、我在项目中遇到个问题，鼠标移到该文字区域的时候，就显示一个下拉区域。移开这个下拉区域的时候，就隐藏这块区域，当然这块区域是浮在页面主体上的。刚开始的时候，以为在要触发的文字区域这块加上onmouseenter或者onmouseleave这两个事件里写隐藏和显示区域就行了，code如下：             onmouseenter=”alert(111);”onmouse
input js 离开事件_onBlur事件与onfocus事件（js） （光标到达和离开是触发事件）...
weixin_42449548的博客
02-01 1万+
[1、回车键触发事件的js代码 在文本框中输入完内容后,经常需要按回车,焦点跳到下个文本框,或者触发按钮事件判断是否按下的为回车非常简单:function EnterPress(){ ionFocus事件就是当光标落在文本框中时发生的事件。onBlur事件是光标失去焦点时发生的事件。可以编如下例子1.html使用onBlur事件处理程序[以前看到alibaba上的注册右边的提示信息效...
<el-input-number > 默认值不显示怎末回事
最新发布
05-05
可能是因为你没有给 `<el-input-number>` 组件设置默认值。你可以通过设置 `v-model` 或者 `:value` 属性来设置组件的默认值。 比如，使用 `v-model` 属性可以这样设置默认值： ``` <el-input-number v-model=...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值