`
coosummer
  • 浏览: 14416 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

在input 输入框中嵌入链接的效果

阅读更多
html:
<div class="inputDiv">
  <input type="text"  class="input" id="name">
  <a href="javascript:void(0)" class="add" onclick="add()">
    +
  </a>
</input>
</div>

css:
.input{
  border:0px;
  width:90%;
  outline:none;
}
.inputDiv{
  border:1px solid #ccc;
  width:200px;
}
.add{
  text-decoration:none;
  width:10%;
}
js:
function add(){
  alert("add");
}

效果可参见:http://www.jscssshare.com/#/sample/OGPcMQvT
分享到:
评论

相关推荐

    tag-input:用于添加和显示标签的输入

    安装安装为节点依赖项: npm install tag-input --save快速开始要在本地测试更改为node_modules / tag-input并运行: npm start & npm run watch指令npm run build -构建生产CSS和JS npm run watch编译css和js npm ...

    JavaScript建立一个语法高亮输入框实现思路

    作为一名开发者我们经常需要进行代码的在线编辑,高亮显示代码等,因此,通过其他的开源项目,我们可以添加一些实用的功能, 在这篇文章中,我将使用JavaScript库ACE来创建一个输入框效果。这是一个完全开源的脚本。...

    微信小程序 input输入及动态设置按钮的实现

    主要介绍了微信小程序 input输入及动态设置按钮的实现的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下

    vue-input-tag:Vue.js 2.0输入标签组件

    import InputTag from 'vue-input-tag' Vue . component ( 'input-tag' , InputTag ) CDN &lt; script src =" https://unpkg.com/vue " &gt; &lt;/ script &gt; &lt; script src =" ...

    jQuery tagsinput在h5邮件客户端中应用详解

    最近一直在折腾邮件的h5应用,为了保证在pc,ios,android端都可以使用,所以使用H5页面的方式嵌入app的webview中。 页面 UI大概是这样的 Jquery tagsinput下载:http://xoxco.com/projects/code/tagsinput/ ...

    HTML5 虚拟键盘出现挡住输入框的解决办法

    //防止键盘把当前输入框给挡住 $$('input[type="text"],textarea').on('click', function () { var target = this; setTimeout(function(){ target.scrollIntoViewIfNeeded(); },100); }); 部分安卓机型适用。 ...

    《程序天下:JavaScript实例自学手册》光盘源码

    1.20 在网页中动态添加Script脚本 1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 ...

    程序天下:JavaScript实例自学手册

    1.20 在网页中动态添加Script脚本 1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 ...

    解决安卓嵌套H5软键盘遮挡问题以及导航栏遮挡问题

    解决安卓嵌套H5,软键盘遮挡输入框以及页面被华为、小米等底部导航栏遮挡问题

    flex3的cookbook书籍完整版dpf(包含目录)

    在HTML中应用嵌入字体 4.14节. 给一个Text 组件中的文本添加拖拽阴影 4.15节. 找出一个TextArea 中最后显示的字符 第五章Lists,Tiles,和Trees(147) 5.1 节.创建可编辑的list 组件 5.2节.为List的某项设置图标 5.3...

    Google Android SDK开发范例大全(第3版) 1/5

    11.1 HTML5 INPUT输入框控制手机输入键盘 11.2 HTML5利用CSS3排版的墙贴相册 11.3 HTML5网页离线数据库 11.4 可拨打电话的HTML连接 11.5 HTML5取回所在经纬度坐标并反查地址 附录A 如何发布程序到Android Market A.1...

    Google Android SDK开发范例大全(第3版) 4/5

    11.1 HTML5 INPUT输入框控制手机输入键盘 11.2 HTML5利用CSS3排版的墙贴相册 11.3 HTML5网页离线数据库 11.4 可拨打电话的HTML连接 11.5 HTML5取回所在经纬度坐标并反查地址 附录A 如何发布程序到Android Market A.1...

    Google Android SDK开发范例大全(第3版) 3/5

    11.1 HTML5 INPUT输入框控制手机输入键盘 11.2 HTML5利用CSS3排版的墙贴相册 11.3 HTML5网页离线数据库 11.4 可拨打电话的HTML连接 11.5 HTML5取回所在经纬度坐标并反查地址 附录A 如何发布程序到Android Market A.1...

    Google Android SDK开发范例大全(第3版) 5/5

    11.1 HTML5 INPUT输入框控制手机输入键盘 11.2 HTML5利用CSS3排版的墙贴相册 11.3 HTML5网页离线数据库 11.4 可拨打电话的HTML连接 11.5 HTML5取回所在经纬度坐标并反查地址 附录A 如何发布程序到Android Market A.1...

    Google Android SDK开发范例大全(第3版)part2

     11.1 HTML5 INPUT输入框控制手机输入键盘  11.2 HTML5利用CSS3排版的墙贴相册  11.3 HTML5网页离线数据库  11.4 可拨打电话的HTML连接  11.5 HTML5取回所在经纬度坐标并反查地址  附录A 如何发布程序到...

    《Google Android SDK开发范例大全(第3版)》.pdf

    11.1 html5 input输入框控制手机输入键盘 788 11.2 html5利用css3排版的墙贴相册 789 11.3 html5网页离线数据库 793 11.4 可拨打电话的html连接 797 11.5 html5取回所在经纬度坐标并反查地址 800 ...

    常用js大全,javascript校验大全

    2.07 避免多次提交页面 在jsp中嵌入该文件,在每个jsp页面的提交语句 前执行该方法.. 121 2.08 检查EMail格式. 122 2.09 电话号码由数字和-组成. 123 2.10 检验IP地址 . 124 2.11 校验忽略样式内容后文本域中的内容...

    js脚本大全 js验证大全 压缩包

    2.07 避免多次提交页面 在jsp中嵌入该文件,在每个jsp页面的提交语句 前执行该方法.. 121 2.08 检查EMail格式. 122 2.09 电话号码由数字和-组成. 123 2.10 检验IP地址 . 124 2.11 校验忽略样式内容后文本域中的内容...

Global site tag (gtag.js) - Google Analytics