blocks|key|1478796|text|这对于输入type=“文本”元素很有效。#souper_fancy是什么类型的元素？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1478797|$("#souper_fancy").focus(function()+{
++++$(this).select();
});|code-block|syntax|javascript|1478798|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This works fine for input type="text" elements. What kind of element is #souper_fancy?

<pre><code>$("#souper_fancy").focus(function() {
 $(this).select();
});
</code></pre>

blocks|key|1264241|text|是onmouseup事件导致选择不被选中，所以您只需添加：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1264242|$("#souper_fancy").mouseup(function(e){
++++e.preventDefault();
});|code-block|syntax|javascript|1264243|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

It's the onmouseup event that is causing the selection to get unselected, so you just need to add:

<pre><code>$("#souper_fancy").mouseup(function(e){
 e.preventDefault();
});
</code></pre>

blocks|key|1264254|text|$('#randomfield').focus(function(event)+{
++++setTimeout(function()+{$('#randomfield').select();},+0);
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1264255|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$('#randomfield').focus(function(event) {
 setTimeout(function() {$('#randomfield').select();}, 0);
});
</code></pre>

blocks|key|1478985|text|虽然可以在IE、Firefox、Chrome、Safari和Opera中选择它，但不能通过在Firefox、Chrome和Safari中再次单击来编辑它。不完全确定，但我认为这可能是因为这三个浏览器重新发出了一个焦点事件，即使字段已经有焦点，因此永远不允许您实际插入光标(因为您再次选择它)，而在IE和Opera中似乎没有这样做，所以焦点事件不会再次触发，从而插入光标。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1478986|我找到了一个更好的修复in+this+Stack+post，它没有这个问题，并且可以在所有浏览器中工作。|offset|length|1478987|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/3380458/looking-for-a-better-workaround-to-chrome-select-on-focus-bug^0|0|B|I|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

While this works for selecting it in IE, Firefox, Chrome, Safari, and Opera, it won't let you edit it by clicking a second time in Firefox, Chrome, and Safari. Not entirely sure, but I think this may be due to those 3 browsers re-issuing a focus event even though the field already has focus thus never allowing you to actually insert the cursor (since you're selecting it again), whereas in IE and Opera it appears it isn't doing that so the focus event didn't get fired again and thus the cursor gets inserted.

I found a better fix <a href="https://stackoverflow.com/questions/3380458/looking-for-a-better-workaround-to-chrome-select-on-focus-bug">in this Stack post</a> that doesn't have that problem and works in all browsers.

blocks|key|1479037|text|这在chrome中也应该是有效的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1479038|$("#souper_fancy").focus(function()+{
++++var+tempSouper+=+$(this);
++++setTimeout(function(){
++++++++tempSouper.select();
++++},100);
});|code-block|syntax|javascript|1479039|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This should work also in chrome:

<pre><code>$("#souper_fancy").focus(function() {
 var tempSouper = $(this);
 setTimeout(function(){
 tempSouper.select();
 },100);
});
</code></pre>

blocks|key|1479137|text|仅阻止在鼠标向上移动时使用默认值，就会导致文本选择始终处于打开状态。MOUSEUP事件负责清除文本选择。但是，通过阻止其默认行为，您无法使用鼠标取消选择文本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1479138|为了避免这种情况，并让文本选择再次工作，您可以在焦点上设置一个标志，从MOUSEUP读取它并将其重置，以便将来的MOUSEUP事件将按预期工作。|1479139|$("#souper_fancy").focus(function()+{
++++$(this).select();

++++//set+flag+for+preventing+MOUSEUP+event....
++++$this.data("preventMouseUp",+true);
});

$("#souper_fancy").mouseup(function(e)+{
++++var+preventEvent+=+$this.data("preventMouseUp");

++++//only+prevent+default+if+the+flag+is+TRUE
++++if+(preventEvent)+{
++++++++e.preventDefault();
++++}

++++//reset+flag+so+MOUSEUP+event+deselect+the+text
++++$this.data("preventMouseUp",+false);
});|code-block|syntax|javascript|1479140|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Just preventing default on mouseup causes the text selection to be ON at all times. The MOUSEUP event is responsible to clear the text selection. However, by preventing its default behaviour, you are unable to deselect the textusing the mouse.

To avoid that and get the text selection to work again, you can set a flag on FOCUS, read it from MOUSEUP and reset it so future MOUSEUP events will work as expected.

<pre><code>$("#souper_fancy").focus(function() {
 $(this).select();

 //set flag for preventing MOUSEUP event....
 $this.data("preventMouseUp", true);
});

$("#souper_fancy").mouseup(function(e) {
 var preventEvent = $this.data("preventMouseUp");

 //only prevent default if the flag is TRUE
 if (preventEvent) {
 e.preventDefault();
 }

 //reset flag so MOUSEUP event deselect the text
 $this.data("preventMouseUp", false);
});
</code></pre>

blocks|key|1264581|text|由于在使用setTimeout时会出现闪烁，因此还有另一个基于事件的解决方案。这样，“焦点”事件会附加“mouseup”事件，而事件处理程序会再次分离自身。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1264582|++++function+selectAllOnFocus(e)+{
++++if+(e.type+==+"mouseup")+{+//+Prevent+default+and+detach+the+handler
++++++++console.debug("Mouse+is+up.+Preventing+default.");
++++++++e.preventDefault();
++++++++$(e.target).off('mouseup',+selectAllOnFocus);
++++++++return;
++++}
++++$(e.target).select();
++++console.debug("Selecting+all+text");
++++$(e.target).on('mouseup',+selectAllOnFocus);
}|code-block|syntax|javascript|1264583|然后连接第一个事件|1264584|++++$('.varquantity').on('focus',+selectAllOnFocus);|1264585|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Because there is flickering when you use setTimeout, there is another event based solution.
This way the 'focus' event attach the 'mouseup' event and the event handler detach itself again.

<pre><code> function selectAllOnFocus(e) {
 if (e.type == "mouseup") { // Prevent default and detach the handler
 console.debug("Mouse is up. Preventing default.");
 e.preventDefault();
 $(e.target).off('mouseup', selectAllOnFocus);
 return;
 }
 $(e.target).select();
 console.debug("Selecting all text");
 $(e.target).on('mouseup', selectAllOnFocus);
}
</code></pre>

Then wire the first event

<pre><code> $('.varquantity').on('focus', selectAllOnFocus);
</code></pre>

blocks|key|1264645|text|在requestAnimationFrame()的回调中使用setSelectionRange()|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1264646|$(document).on('focus',+'._selectTextOnFocus',+(e)+=>+{
++++var+input+=+e.currentTarget;
++++var+initialType+=+e.currentTarget.type;

++++requestAnimationFrame(()+=>+{
++++++++//+input.select()+is+not+supported+on+iOS
++++++++//+If+setSelectionRange+is+use+on+a+number+input+in+Chrome+it+throws+an+exception,
++++++++//+so+here+we+switch+to+type+text+first.
++++++++input.type+=+"text";
++++++++input.setSelectionRange(0,+Number.MAX_SAFE_INTEGER+%7C%7C+9999);
++++++++input.type+=+initialType;
++++});
});|code-block|syntax|javascript|1264647|使用setSelectionRange()而不是select()，因为select()不能在移动Safari中工作(参见Programmatically+selecting+text+in+an+input+field+on+iOS+devices+(mobile+Safari))。|1264648|在选择文本之前，使用requestAnimationFrame是必要的，否则在iOS上出现键盘后，元素不能正确滚动到视图中。|1264649|在使用setSelectionRange()时，将输入类型设置为text很重要，否则可能会在Chrome上抛出异常(参见selectionStart/selectionEnd+on+input+type="number"+no+longer+allowed+in+Chrome)。|1264650|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/3272089/programmatically-selecting-text-in-an-input-field-on-ios-devices-mobile-safari|1|https://stackoverflow.com/questions/21177489/selectionstart-selectionend-on-input-type-number-no-longer-allowed-in-chrome^0|1|N|U|J|0|0|2|J|O|8|Z|8|1O|28|0|0|A|L|0|3|J|W|4|1O|26|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|15|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|16|8|@$9|17|A|18|B|C]|$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]]|D|@$9|1D|A|1E|1|1F]]|E|$]]|$1|M|3|N|5|6|7|1G|8|@$9|1H|A|1I|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|1J|8|@$9|1K|A|1L|B|C]|$9|1M|A|1N|B|C]]|D|@$9|1O|A|1P|1|1Q]]|E|$]]|$1|Q|3|-4|5|6|7|1R|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]|Y|$5|T|U|V|E|$W|Z]]]]

Use <code>setSelectionRange()</code> inside of a callback to <code>requestAnimationFrame()</code>:

<pre><code>$(document).on('focus', '._selectTextOnFocus', (e) =&gt; {
 var input = e.currentTarget;
 var initialType = e.currentTarget.type;

 requestAnimationFrame(() =&gt; {
 // input.select() is not supported on iOS
 // If setSelectionRange is use on a number input in Chrome it throws an exception,
 // so here we switch to type text first.
 input.type = "text";
 input.setSelectionRange(0, Number.MAX_SAFE_INTEGER || 9999);
 input.type = initialType;
 });
});
</code></pre>

Use <code>setSelectionRange()</code> instead of <code>select()</code> since <code>select()</code> doesn't work in mobile Safari (see <a href="https://stackoverflow.com/questions/3272089/programmatically-selecting-text-in-an-input-field-on-ios-devices-mobile-safari">Programmatically selecting text in an input field on iOS devices (mobile Safari)</a>).

It is necessary to wait using <code>requestAnimationFrame</code> before selecting the text, otherwise the element isn't correctly scrolled into view after the keyboard comes up on iOS.

When using <code>setSelectionRange()</code> it is important to set the input type to <code>text</code>, otherwise it may throw exceptions on Chrome (see <a href="https://stackoverflow.com/questions/21177489/selectionstart-selectionend-on-input-type-number-no-longer-allowed-in-chrome">selectionStart/selectionEnd on input type=&quot;number&quot; no longer allowed in Chrome</a>).

blocks|key|1479298|text|如果有人再次遇到这个问题，我在这里得到了一个纯JS解决方案，它(目前)可以在所有浏览器上工作，包括。莫比尔县|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1479299|<input+type="text"+value="Hello+world..."+onFocus="window.setTimeout(()+=>+this.select());">|code-block|syntax|javascript|1479300|(如果没有setTimeout()，它就不能在Safari、mobile+Safari和MS+Edge上工作)|1479301|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

If anyone comes again across this problem I got here a pure JS solution which is (at the moment) working on all browsers incl. mobile

<pre><code>&lt;input type="text" value="Hello world..." onFocus="window.setTimeout(() =&gt; this.select());"&gt;
</code></pre>

(without setTimeout() it's not working on Safari, mobile Safari and MS Edge)

I have the following jQuery code (similar to <a href="https://stackoverflow.com/questions/480735/">this question</a>) that works in Firefox and IE, but fails (no errors, just doesn't work) in Chrome and Safari. Any ideas for a workaround?

<pre><code>$("#souper_fancy").focus(function() { $(this).select() });
</code></pre>

Selecting text on focus using jQuery not working in Safari and Chrome

jQuery

我有以下jQuery代码(类似于)，它可以在火狐和IE中工作，但在Chrome和Safari中失败(没有错误，只是不能工作)。有什么解决办法吗？$("#souper_fancy").focus(function() { $(this).select() });

问使用jQuery选择焦点文本在Safari和Chrome中不起作用
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery选择焦点文本在Safari和Chrome中不起作用EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery选择焦点文本在Safari和Chrome中不起作用
EN