Jquery文本输入更改按钮单击
jquery text input change on button click
我去了几个线程在这个网站和其他工作修复selectionStart和selectionEnd为ie,并决定从这个网站实现代码。
在简单的html页面中,有多个具有公共类和唯一id的文本字段。有几个按钮作为虚拟键盘。聚焦于任何文本字段并单击按钮将在光标位置将文本放入该元素。如果选择了某些文本,则在mozilla和chrome中也可以正常工作。但是在其他浏览器中有问题
opera -踱步文本是可以的,但要选择而不是替换文本添加到选择结束(即,如果从右到左进行选择,则放置在左侧,反之亦然)。
ie8 -行参数无效"stored_range。
moveToElementText(元素);
完整代码如下图
<!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" xml:lang="en" lang="en">
<head>
<title>selection test</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='js/jquery-1.4.2.js'></script>
<script>
window.onload = function () {
jQuery('.iptext').live('focus', function(event) {
holdFocus=$(this);
holdFocus=holdFocus[0];//this is required
});
jQuery('.addchar').live('click', function(event) {
// Get focused textfield
if(holdFocus==null)
{
}
else
{
var element =holdFocus;
if( document.selection ){
// The current selection
var range = document.selection.createRange();
// We'll use this as a 'dummy'
var stored_range = range.duplicate();
// Select all text
stored_range.moveToElementText( element );
// Now move 'dummy' end point to end point of original range
stored_range.setEndPoint( 'EndToEnd', range );
// Now we can calculate start and end points
element.selectionStart = stored_range.text.length - range.text.length;
element.selectionEnd = element.selectionStart + range.text.length;
}
$(holdFocus).val(
$(holdFocus).val().substring(0, holdFocus.selectionStart)+
$.trim($(this).text())+
$(holdFocus).val().substring(holdFocus.selectionEnd)
);
}
});
};
</script>
<style type="text/css" media="screen">
body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; }
ul {display:block;}
li { list-style: none;display:inline-block;width:20px;height:20px;background-color:#808000;}
ul li a {display:block;text-decoration:none; }
</style>
</head>
<body>
<input type="text" id="txt1" class="iptext" autocomplete="off" value="Testing String">
<input type="text" id="txt2" class="iptext" autocomplete="off" value="Testing String">
<ul>
<li><a href="#" class="addchar">a</a></li>
<li><a href="#" class="addchar">b </a></li>
<li><a href="#" class="addchar">c</a></li>
<li><a href="#" class="addchar">d </a></li>
</ul>
</body>
</html>
您选择从中获取的站点的代码并非万无一失。此外,在IE中,在处理插入符号或选择位置之前,通常需要关注输入(使用其focus()
方法)。
相关文章:
- 如何隐藏按钮单击事件上的占位符
- 从Web服务器下载图像按钮单击使用JavaScript
- 在SweetAlert中传递ASP.NET按钮单击事件
- 单选按钮单击可刷新/更改网站的小区域
- 调用按钮单击事件 ajax 加载的用户控件
- 附加 jQuery 代码以在加载和按钮单击时运行
- 在按钮单击时将图像URL数据显示到弹出框中,而无需禁用背景
- 按钮单击服务器单击
- 触发单选按钮单击,并在页面刷新时记住选择
- 如何使用 javascript 而不是使用控制器中的方法在 rails 中呈现部分按钮单击
- jQuery UI 选项卡 - 将参数设置为下一个/上一个按钮单击
- 如何在 Angular JS 中的按钮单击上添加类
- 当元素上有多个类时触发按钮单击事件
- 如何在 HTML 中的按钮单击上更改图像(IMG URL 每次来自服务器)
- 如何使用javascript刷新我的html页面时清除按钮单击
- 阻止后退按钮 - 单击按钮时忽略
- 如何制作按钮.单击“开始时不运行”
- Rails:尝试在按钮单击时渲染部分
- 在页面加载时调用函数,在按钮单击时再次调用函数,但参数不同
- 如何在服务器端的文本中添加按钮单击事件