用jQuery怎么实现点击输入框呢

用jQuery怎么实现点击输入框呢,第1张

jquery的focus()方法可以使元素获得焦点

$(selector)focus();   // 使目标元素获得焦点

示例代码如下

创建Html元素

<div class="box">

<span>点击按钮使文本域获得焦点:</span><br>

<div class="content">

<textarea name="test"></textarea>

</div>

<input type="button" value="准备输入">

</div>

设置css样式

divbox{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}

divbox span{color:#999;font-style:italic;}

divcontent{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}

textarea{width:250px;height:100px;padding:10px;border:1px solid #9966cc;}

input[type='button']{height:30px;margin:10px;padding:5px 10px;}

编写jquery代码

$(function(){

$(":button")click(function() {

$("textarea[name='test']")focus();

})

})

观察效果

<meta ;

要改成其他效果,修改move类即可

使用css3动画,需要浏览器支持

从网上拷贝一段代码给你

var setCursorPos = function( el, pos ) {

if( elcreateTextRange ) {

var rng = elcreateTextRange(); //新建textRange对象

rngmoveStart( 'character', pos ); //更改rng对象的开始位置

rngcollapse( true ); //光标移动到范围结尾

rngselect();//选中

elfocus();

} else if( elsetSelectionRange ) {

elfocus(); //先聚焦

elsetSelectionRange( pos , pos ); //设光标

}

}

以上是设置光标位置的函数, 要在光标位置插入文字用以下函数

function insertAtCursor(textarea, text) {

if (!textarea || !text) {

return;

}

if (documentselection) {

//IE

textareafocus();

sel = documentselectioncreateRange();

seltext = text;

} else if (textareaselectionStart || textareaselectionStart == '0') {

//Mozilla/Firefox

textareafocus();

var startPos = textareaselectionStart;

var endPos = textareaselectionEnd;

textareavalue = textareavaluesubstring(0, startPos) + text + textareavaluesubstring(endPos, textareavaluelength);

textareasetSelectionRange(endPos+textlength, endPos+textlength);

} else {

textareavalue += text;

}

}

用法

var el= documentgetElementById('text1');

insertAtCursor(el, 'test');

以上就是关于用jQuery怎么实现点击输入框呢全部的内容,包括:用jQuery怎么实现点击输入框呢、html 有没办法让文本框获取焦点的时候 另一个元素执行动画、javascript *** 作 textarea等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9694705.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-01
下一篇 2023-05-01

发表评论

登录后才能评论

评论列表(0条)

保存