2. 程式人生 > >Jquery實現文字框得到焦點的時候，文字框的焦點出現在最後！

Jquery實現文字框得到焦點的時候，文字框的焦點出現在最後！

阿新 • • 發佈：2019-02-12

在前端開發中，有時我們為了客戶更好的體驗，需要使用js處理一些css解決不了的問題
比如，當文字框的文字多餘文字框的時候，有一部分文字沒有出來的時候，我們點選文字框，讓焦點出現在最後面，這樣子可以提高使用者的體驗
這裡舉個例子來說明一下
比如這種情況
這裡寫圖片描述
當點選文字框的時候，在文字框的焦點出現在最後

下面用程式碼來舉例

//html結構
<body>
    <input type="text" value="這一行文字的焦點一定會出現在最後">
    <button>按鈕</button>
</body>

jquery

$("button"
 
).click(function(event) {
        $("input").focus();//使input獲取焦點
        var result=$("input").val();//對input取值
        $("input").val("")//使input的值為空
        $("input").val(result);//重新負值
        $("input")[0].scrollLeft=700;//這裡我對文字框的屬性做了一個猜想，應該是有混動條的屬性的，所以進行一個偏移
    });

最後看一下gif圖
這裡寫圖片描述

相關推薦

jquery實現點選頁面空白處，彈框消失

如何實現點選頁面空白處使彈框消失？ 最近做專案，需要實現一個效果，就是“下拉框”或者彈框展開/顯示之後，並不選擇其中一個下拉選項，點選頁面空白處，就使下拉框或者彈框收起/隱藏。 如果是select標

jQuery實現滑鼠移上彈出提示框，移出消失

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

jQuery實現大型網站導航欄，滑鼠移出使用mouseout使內容框隱藏但當滑鼠滑到框時已經隱藏如何解決？

大型網站比如慕課網，電商商城的導航都是左側導航分類，右側是輪播圖，然後當滑鼠經過導航分類時顯示對應的內容框；這個就用到我之前寫的如何點選頂部導航顯示對應的左側邊欄，原理是相同的； 先來看一下我要實現的效果圖：  跟以前寫的點選主導航顯示對應的左側欄，但因為這裡nav_

JavaScript 實現textarea限制輸入字數， 輸入框字數實時統計更新，輸入框實時字數計算移動端bug解決

表單 var 假設 字體 eve 大網 blog 無法 tin textarea稱文本域，又稱文本區，即有滾動條的多行文本輸入控件，在網頁的提交表單中經常用到。與單行文本框text控件不同，它不能通過maxlength屬性來限制字數，為此必須尋求其他方法來加以限制以達到預設

jquery實現點選其他區域，清除指定div

jQuery(document).on('click', function(e) { var e = e || window.event; var idValue = jQuery(e.target).attr('id'); if (idValue != 'empty_tip') {

React Native之彈框存在TextInput，輸入框有焦點情況下需要點選兩次才可觸發事件-解決

Bug情況描述：React Native專案中，點選按鈕A出現彈框浮層，彈框中需要TextInput輸入數字，鍵盤浮起來；這時候點選 取消按鈕L 或者 確定按鈕R，只是讓鍵盤收起，但是並沒有觸發 取消

jQuery實現輪播圖特效，仿京東——李帥醒部落格

JS程式碼：<script type="text/javascript"> var ArrImg=["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg"]; var num=ArrImg.lengt

web前端，jquery實現瀑布流總結7，jq動態新增div等元素

<!DOCTYPE html> <!--jq動態新增div等元素--> <html> <head lang="en"> <meta cha

jQuery實現上傳圖片時，顯示圖片預覽效果

程式碼如下<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>

利用jQuery實現datepicker只顯示年，月，不顯示日 year，month only

思路：利用jquery的close函式，利用fiefox尋找日期的div塊，利用css知識將其隱藏 以下是程式碼部分 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">  

Android自定義dialog並實現失去焦點，activity獲取焦點的功能

前言：由於在專案中需要用到更新顯示動畫的需求，所以想到了dialog，自定義dialog不難，網上教程很多，但是在實現dialog背景透明的需求時，遇到了一點問題，網上的一些方法在我的機器上並沒有實現，只能曲折中找到了另一個方法實現。雖然有點麻煩，但畢竟效果不錯。 此方

JQuery實現滑鼠滑動多次，只觸發一次響應事件

正常在設定滑鼠滾輪事件的時候，一次滾動對應一次響應事件。但是按照使用者習慣，使用者一次滑動滑鼠滾輪的動作中，可能實際上滑鼠滾輪滾動了多次（通俗的講，就是使用者不會一下一下的滑動滾輪）。這樣實際上觸發了多次滾輪響應事件，無法達到理想中，使用者滑動一次滾輪，只產生一個動作的效果，

解決原生js或jQuery 實現父視窗的問題，如window.parent.document.getElementById()

做WEB前端開發的過程中，經常會有這樣的需求，使用者點選【編輯】按鈕，彈出一個對話方塊，在裡邊修改相應的值，然後把修改後的值顯示在原頁面，最後點選儲存。 用window.parent.document.getElementById().setAttribute("va

【前端】angularJS或者jquery實現按鈕點選變色，再點選變回來

目的：使按鈕在兩種狀態之間切換，注意：簡單的通過.修改focus和active的樣式是做不到的。 效果圖： html程式碼： <div class="col-1">

jquery實現checkbox全選功能，第二次點選【全選】按鈕，頁面無法勾選

去面試，老多人問會不會jQuery啊，會不會ExtJS啊，以前都零星使用過，是使用別人封裝好的版本，沒單獨研究過這些前端技術，閒暇之餘，先研究研究jQuery。 找了本書，做了個jQuery實現全選功能的例子，覺得程式碼邏輯上都沒有問題，第二次點選【全選】按鈕頁面就是無法勾

jQuery實現在右下角彈出提示框

用jQuery實現這個功能其實非常簡單，網上的例子太多太多了。不過，那些例子一般沒有涉及到後臺往前臺傳值的問題。在本文中這個問題會得到解決。 在實際應用中，提示框都是自動彈出的，因此，jQuery函式需寫在jsp頁面的<html>之外，即在<html>

enter鍵切換焦點，input獲得焦點後placeholder消失

需求：充分考慮使用者體驗，輸入使用者名稱和密碼時，不用按Tab鍵，而是按enter鍵就可以進行上下切換。並且為了其美觀性，在input獲得焦點時，placeholder會消失。 描述：通常在做input來提交使用者名稱和密碼時，會用placeholder來提示

Jquery實現文字框得到焦點的時候，文字框的焦點出現在最後！

在前端開發中，有時我們為了客戶更好的體驗，需要使用js處理一些css解決不了的問題 比如，當文字框的文字多餘文字框的時候，有一部分文字沒有出來的時候，我們點選文字框，讓焦點出現在最後面，這樣子可以提高使用者的體驗 這裡舉個例子來說明一下 比如這種情況

通過js實現得到焦點時文字框清空,失去焦點時又顯示預設文字，值發生改變時不再恢復預設文字?

<input type="text"value="我是預設值"onblur="if(this.value==''){this.value='我是預設值'}"onfocus="if(this.value=='我是預設值'){this.value=''}"/>

jquery中，input獲得焦點時光標自動定位到文字後面

gpo ima jquery 自動 src bsp com 焦點 定位 效果： jquery中，input獲得焦點時光標自動定位到文字後面