js实现input输入框点击变大缩小
程序员文章站
2022-04-23 10:52:12
...
本文主要和大家分享js实现input输入框点击变大缩小的实例代码，希望能帮助到大家。
一、input输入框点击变大缩小的js代码
html中
<style type="text/css">
input[type='text'] {
width: 100px;
height: 30px;
border-radius: 5px;
}
</style>
</head>
<body>
<p>
标题:<input class="InputTitle" value="" type="text" />
</p>
<!-- js响应"内容"输入框变大事件:src="/js/article/change_input.js" -->
<p>
内容:<input class="InputContent" value="" type="text_content" />
</p>
js代码中
$(document).ready(function() {
$("input[type='text_content']").focus(function() {
$(this).animate({
"width" : "400px",
"height" : "70px"
})
}).blur(function() {
$(this).animate({
"width" : "100px",
"height" : "30px"
})
});
});
相关推荐：
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
以上就是js实现input输入框点击变大缩小的详细内容，更多请关注其它相关文章！
上一篇： php用一个数组中的随机项来替换字符串中匹配的部分?
下一篇： 在JS中如何实现回到顶部效果
推荐阅读
-
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
-
JS获得多个同name 的input输入框的值的实现方法
-
JS实现网页表格自动变大缩小的方法_javascript技巧
-
js实现点击添加一个input节点_javascript技巧
-
js实现点击添加一个input节点_javascript技巧
-
JS实现点击按钮复制<input>标签中的值到剪贴板
-
js动态修改input输入框的type属性(实现方法解析)_javascript技巧
-
实现bootstrap布局的input输入框中的图标点击功能_html/css_WEB-ITnose
-
js动态修改input输入框的type属性(实现方法解析)_javascript技巧
-
JS获得多个同name 的input输入框的值的实现方法