jQuery将光标移动到文本输入的末尾

Posted 2023-04-18

【中文标题】jQuery将光标移动到文本输入的末尾

【英文标题】：jQuery move cursor to end of text input

【发布时间】：2011-11-08 05:39:24

【问题描述】：

目前我有一个输入框，其值为“当前网站”

当他们点击它时，我运行这个函数：

function clearMeHttp(formfield) 
    if (formfield.defaultValue == formfield.value) 
        formfield.value = "http://";
    
;

如果您单击该框，它可以正常工作，但是如果您进入该框，它只会突出显示“http://”这个词，这会破坏它的目的，除非他们按下我想要避免的右箭头键。

谢谢！

这是另一个代码：<input onblur="restoreMe(this)" onfocus="clearMeHttp(this)" type="text" class="fade" name="website" value="Current website">

restoreMe 只是用 jquery 将默认值淡化回来

【问题讨论】：

你在哪个事件上调用了这个函数？

<input onblur="restoreMe(this)" onfocus="clearMeHttp(this)" type="text" class="fade" name="website" value="Current website">

我不确定，但您必须为此使用 setselectionrange 函数。

【参考方案1】：

我稍微修改了你的代码，但是使用 jquery 事件而不是内联 html。

使用的完整脚本：

var defaultVal = 'Current website';
$(function() 

    $('.urlCheck').focus(function(e) 
        if ($(this).val() == "http://" || $(this).val() == '' || $(this).val() == defaultVal) 
            $(this).val('http://');
            $(this).select(false);

        
    );

    $('.urlCheck').keyup(function(e) 
        if ($(this).val() == "http://" || $(this).val() == '' || $(this).val() == defaultVal) 
            $(this).val('http://');
        
    );

    $('.urlCheck').blur(function(e) 
        $(this).val(defaultVal);
    );

);

工作链接：http://jsfiddle.net/29gks/6/

keyup 事件是 Chrome 和 Safari 的覆盖

【讨论】：

让我知道它是否适合您.. 忙着寻找适用于 Chrome/Safari 的有效取消选择解决方案。

是否可以在他们进入框中并在显示 http:// 之后模仿右箭头功能？我不介意他们是否可以删除它或其中的任何一个（如果他们真的想要他们可以退格）。只要它不突出我很高兴。禁用标签并不理想

:) 这实际上是我目前正在查看的内容。会尽快通知您。

我已经更新了我的答案。使用 keyup 事件并设置值修复了 Chrome/Safari 问题。

【参考方案2】：

你没用过jquery，所以我跟着你。

脚本：

function clearMeHttp(formfield) 
    if (formfield.defaultValue == formfield.value)  
         formfield.value="";        
         formfield.style.padding="0 0 0 40";
         document.getElementById("http").style.display="block";
    
; 

html:

<label id="http" style="float:left;position:absolute;display:none;">http://</label>
<input onblur="restoreMe(this)" onfocus="clearMeHttp(this)" type="text" class="fade" name="website" value="Current website">

这符合您的要求，但可能不是您想要的方式

【讨论】：

抱歉，我标记了 jquery，因为我认为其中可能内置了一个函数来简化它。不幸的是，我已经使用了很多标签，所以它必须没有那个方法。

【参考方案3】：

您需要在大多数浏览器上使用setSelectionRange()（或selectionStart 和selectionEnd），在IE TextRange 恶作剧。

这是我之前对同一问题的回答：How to place cursor at end of text in textarea when tabbed into