`

html focus 引入 类似微博的效果

 
阅读更多

<!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>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
    <label>
        <textarea name="test1" id="test1" cols="45" rows="5">这是默认内容,嘿嘿,测试一下!</textarea>
        <br/>
        <br/>
        <input name="tag" type="text" id="tag" value="AAA"/>
        <br/>
        <br/>
        <a href="javascript:void(0);"
           onclick="insertAtCursor(document.getElementById('test1'), document.getElementById('tag').value);">插入</a>
    </label>
</form>
</body>
</html>
<script type="text/javascript">
    function insertAtCursor(myField, myValue) {
        if (document.selection) {   //IE support
            myField.focus();
            sel = document.selection.createRange();
            sel.text = myValue;
            sel.select();
        }
        else if (myField.selectionStart || myField.selectionStart == '0') {  //mozilla/netscape support
            var startPos = myField.selectionStart;
            var endPos = myField.selectionEnd;
            var restoreTop = myField.scrollTop;  // save scrollTop before insert
            myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
            if (restoreTop > 0) {  // restore previous scrollTop
                myField.scrollTop = restoreTop;
            }
            myField.focus();
            myField.selectionStart = startPos + myValue.length;
            myField.selectionEnd = startPos + myValue.length;
        } else {
            myField.value += myValue;
            myField.focus();
        }
    }
</script>

  • 大小: 70.3 KB
  • 大小: 109.5 KB
  • 大小: 10.2 KB
  • 大小: 98.1 KB
  • 大小: 98.1 KB
分享到:
评论

相关推荐

    用HTML+CSS制作微博的静态页面.zip

    - CSS3引入了新的选择器(如`:hover`、`:active`、`:focus`)和动画效果,增强交互性。 3. 页面响应式设计: - 由于提到“电脑分辨率不同,可能显示效果有些偏差”,所以设计应考虑响应式布局,适应不同设备的...

    jQuery新浪微博发布页面代码.zip

    本篇将详细解析"jQuery新浪微博发布页面代码",带你深入理解如何利用jQuery构建类似新浪微博的发布功能。 一、jQuery基础 在开始之前,我们需要对jQuery的基本用法有所了解。jQuery是一个JavaScript库,它简化了DOM...

    focus.swf幻灯片插件

    随着HTML5的普及,对于移动设备和现代浏览器,可以考虑使用HTML5的Canvas或SVG等技术来实现类似的动画效果,以确保更广泛的兼容性。 此外,为了优化用户体验,我们可以结合JavaScript或者jQuery等库来实现更复杂的...

    仿微博登录界面的实现

    仿微博登录界面的实现,适合新手学习! $(function(){ $("#name").val("邮箱/用户名/手机"); $("#pass").val("请输入密码"); $("#name").focus(function(){ var val=$(this).val(); if(val=="邮箱/...

    类似flash效果jQuery焦点图.zip

    "类似Flash效果jQuery焦点图"是指利用jQuery实现的一种动态展示图片或内容的交互式组件,其效果类似于早期Flash技术所能实现的过渡和动画效果。这种焦点图通常用于网站的首页或产品展示区域,能够吸引用户注意力,...

    focus.swf图片切换

    对于新的项目,可以考虑使用纯JavaScript库如Bootstrap Carousel或Swiper.js实现类似的效果,它们具有更好的跨平台性和更低的资源消耗。 综上所述,focus.swf是基于Flash技术的焦点图切换解决方案,通过...

    jquery实现微博分享评论表情

    在IT行业中,jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。本教程将详细讲解如何利用jQuery实现微博分享评论功能,并集成表情系统,为用户提供丰富的表达方式。...

    ifocus 焦点图片轮换(酷)

    "ifocus 焦点图片轮换(酷)"是一个用于创建动态焦点图片展示效果的工具。在网页设计中,焦点图通常被用作网站主页的重要元素,用来吸引用户注意力并展示重要信息或精彩内容。ifocus 焦点图片轮换特效通过动画效果使多...

    jquery分享代码在线制作鼠标一键复制url路径功能与分享信息 微博分享

    1. 引入微博分享API:需要在页面中引入微博提供的SDK或者使用其提供的分享链接格式。 2. 设置分享参数:包括URL、标题、描述等,这些参数会随分享请求一起发送给微博服务器。 3. 触发分享事件:当用户点击分享按钮时...

    关于my focus焦点图插件的介绍

    my focus是一款广泛使用的焦点图插件,尤其适合那些希望在网站上创建吸引人的动态效果的开发者。本文将深入探讨my focus插件的特性和使用方法,以帮助你更好地理解和应用这款工具。 首先,my focus插件的核心功能是...

    管家下滑效果html5

    在这个"管家下滑效果html5"的主题中,我们将探讨如何使用HTML5结合JavaScript和CSS3来创建一个类似电脑管家的超级炫酷的下滑滚动效果。 首先,HTML5提供了结构化标签,如、、、等,这些标签有助于提高网页内容的...

    AudioFocus

    3. AUDIOFOCUS_GAIN_TRANSIENT_MAY_DUCK:与上面类似,但其他应用可以继续播放,但音量会被降低(“鸭式”效果)。 4. AUDIOFOCUS_LOSS:失去AudioFocus,应用应该立即停止播放。 5. AUDIOFOCUS_LOSS_TRANSIENT:...

    9种html5+css3隐藏侧边栏导航菜单动画效果.rar

    2. **CSS3选择器和属性**:CSS3引入了更强大的选择器,如`:hover`、`:active`和`:focus`,可以用来控制用户与导航菜单的交互。同时,`transition`和`animation`属性使我们能够创建平滑的过渡和动画效果,例如在点击...

    focus.swf 焦点图片

    《焦点图片技术详解——以focus.swf为例》 在网页设计和开发中,焦点图片(Focus Picture)是一...在当前的Web环境中,我们可以考虑使用HTML5的Canvas、SVG或CSS3的动画来实现类似的效果,以保持对最新技术的适应性。

    css3+html5效果请用firefox浏览器访问

    例如,伪类选择器如`:hover`、`:active`和`:focus`可以实现更精细的交互设计;`flexbox`和`grid`布局使得复杂的页面布局变得简单易行;而`@keyframes`和`transition`则让动态效果成为可能。 在文字效果方面,CSS3...

    Focus Photoeditor v5.2

    用户可以通过选择工具精确地设置图像的焦点区域,模糊背景,从而实现类似浅景深的效果。这项功能对于拍摄微距照片或者需要突出主体的场景特别有用。此外,软件还提供了手动调整模糊程度和过渡效果的功能,以达到理想...

    HTML5炫酷动画效果的网站引导页.rar

    CSS3引入了许多新的选择器、布局模式和动画效果,使得网页设计更加丰富和动态。在这个项目中,可能涉及以下CSS3特性: 1. 动画(Animations):CSS3的`@keyframes`规则可以定义动画的过程,配合`animation`属性可以...

    FOCUS 6 Python API

    WMC FOCUS6.3 用于风力发电叶片结构设计专用软件,此文档为其API 二次开发结构,采用Python语言进行二次开发

    HTML5 INPUT文本框点击高亮特效.rar

    接下来,CSS3的引入使得我们可以对这些HTML元素进行更加精细和丰富的样式控制。例如,我们可以通过设置`border`属性来改变输入框的边框,使用`box-shadow`来添加阴影效果,用`transition`来实现平滑的动画过渡。以下...

    解决iOS下无法触发focus事件的问题

    "解决iOS下无法触发focus事件的问题" 在移动端开发中, focus 事件是一个非常重要的事件,它可以帮助开发者更好地控制用户的输入行为。但是在iOS平台上,触发 focus 事件却是一个非常棘手的问题。本文将为大家分享...

Global site tag (gtag.js) - Google Analytics