การเลือกข้อความทั้งหมดในการป้อนข้อความ HTML เมื่อคลิก

ฉันมีรหัสต่อไปนี้เพื่อแสดงกล่องข้อความในหน้าเว็บ HTML

<input type="text" id="userid" name="userid" value="Please enter the user ID" />

เมื่อหน้าดังกล่าวปรากฏขึ้นข้อความจะมีข้อความกรุณาใส่ข้อความID ผู้ใช้ อย่างไรก็ตามฉันพบว่าผู้ใช้ต้องคลิก 3 ครั้งเพื่อเลือกข้อความทั้งหมด (ในกรณีนี้คือโปรดป้อน ID ผู้ใช้ )

เป็นไปได้หรือไม่ที่จะเลือกข้อความทั้งหมดด้วยการคลิกเพียงครั้งเดียว?

แก้ไข:

ขออภัยฉันลืมที่จะพูดว่า: ฉันต้องใช้อินพุต type="text"

คุณสามารถใช้ข้อมูลโค้ดจาวาสคริปต์นี้:

<input onClick="this.select();" value="Sample Text" />

แต่ดูเหมือนจะไม่ทำงานบนมือถือ Safari ในกรณีเหล่านี้คุณสามารถใช้:

<input onClick="this.setSelectionRange(0, this.value.length)" value="Sample Text" />

โซลูชันที่โพสต์ก่อนหน้านี้มีนิสัยใจคอสองประการ:

1. ใน Chrome การเลือกผ่าน. select () ไม่ติด - การเพิ่มการหมดเวลาเล็กน้อยแก้ไขปัญหานี้ได้
2. ไม่สามารถวางเคอร์เซอร์ในตำแหน่งที่ต้องการหลังจากโฟกัส

ต่อไปนี้เป็นโซลูชันที่สมบูรณ์ซึ่งเลือกข้อความทั้งหมดบนโฟกัส แต่อนุญาตให้เลือกจุดเคอร์เซอร์เฉพาะหลังจากโฟกัส

        $(function () {
            var focusedElement;
            $(document).on('focus', 'input', function () {
                if (focusedElement == this) return; //already focused, return so user can now place cursor at specific point in input.
                focusedElement = this;
                setTimeout(function () { focusedElement.select(); }, 100); //select all text in any field on focus for easy re-entry. Delay sightly to allow focus to "stick" before selecting.
            });
        });

Html (คุณจะต้องใส่แอตทริบิวต์ onclick ในทุกอินพุตที่คุณต้องการให้ทำงานบนหน้าเว็บ)

 <input type="text" value="click the input to select" onclick="this.select();"/>

หรือตัวเลือกที่ดีกว่า

jQuery (ใช้ได้กับทุกข้อความในหน้าไม่จำเป็นต้องเปลี่ยน html ของคุณ):

<script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>  
<script type="text/javascript">
    $(function(){
        $(document).on('click','input[type=text]',function(){ this.select(); });
    });
</script>

ฉันรู้ว่ามันเก่า แต่ตัวเลือกที่ดีที่สุดคือการใช้placeholderแอตทริบิวต์ HTML ใหม่ถ้าเป็นไปได้:

<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />

สิ่งนี้จะทำให้ข้อความแสดงยกเว้นว่ามีการป้อนค่าทำให้ไม่จำเป็นต้องเลือกข้อความหรืออินพุตที่ชัดเจน

คำตอบที่ระบุไว้เป็นบางส่วนตามฉัน ฉันได้ลิงก์ด้านล่างสองตัวอย่างของวิธีการทำเช่นนี้ใน Angular และกับ JQuery

วิธีนี้มีคุณสมบัติดังต่อไปนี้:

• ใช้งานได้กับเบราว์เซอร์ทั้งหมดที่รองรับ JQuery, Safari, Chrome, IE, Firefox และอื่น ๆ
• ใช้งานได้กับ Phonegap / Cordova: Android และ IOs
• เลือกทั้งหมดเพียงครั้งเดียวหลังจากที่อินพุทได้รับการโฟกัสจนกระทั่งเบลอถัดไปจากนั้นทำการโฟกัส
• สามารถใช้หลายอินพุตได้และไม่ผิดพลาด
• คำสั่งเชิงมุมมีการใช้งานที่ยอดเยี่ยมเพียงเพิ่มคำสั่ง select-all-on-click
• JQuery สามารถแก้ไขได้อย่างง่ายดาย

JQuery: http://plnkr.co/edit/VZ0o2FJQHTmOMfSPRqpH?p=preview

$("input").blur(function() {
  if ($(this).attr("data-selected-all")) {
  //Remove atribute to allow select all again on focus        
  $(this).removeAttr("data-selected-all");
  }
});

$("input").click(function() {
  if (!$(this).attr("data-selected-all")) {
    try {
      $(this).selectionStart = 0;
      $(this).selectionEnd = $(this).value.length + 1;
      //add atribute allowing normal selecting post focus
      $(this).attr("data-selected-all", true);
    } catch (err) {
      $(this).select();
      //add atribute allowing normal selecting post focus
      $(this).attr("data-selected-all", true);
    }
  }
});

เชิงมุม: http://plnkr.co/edit/llcyAf?p=preview

var app = angular.module('app', []);
//add select-all-on-click to any input to use directive
app.directive('selectAllOnClick', [function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var hasSelectedAll = false;
      element.on('click', function($event) {
        if (!hasSelectedAll) {
          try {
            //IOs, Safari, thows exception on Chrome etc
            this.selectionStart = 0;
            this.selectionEnd = this.value.length + 1;
            hasSelectedAll = true;
          } catch (err) {
            //Non IOs option if not supported, e.g. Chrome
            this.select();
            hasSelectedAll = true;
          }
        }
      });
      //On blur reset hasSelectedAll to allow full select
      element.on('blur', function($event) {
        hasSelectedAll = false;
      });
    }
  };
}]);

ลอง:

onclick="this.select()"

มันใช้งานได้ดีสำหรับฉัน

คุณสามารถใช้งานได้ตลอดเวลาdocument.execCommand( รองรับในเบราว์เซอร์หลักทั้งหมด )

document.execCommand("selectall",null,false);

เลือกข้อความทั้งหมดในองค์ประกอบที่มุ่งเน้นในปัจจุบัน

ป้อนข้อมูลอัตโนมัติพร้อมด้วยเหตุการณ์ onfocus:

<INPUT onfocus="this.select()" TYPE="TEXT" NAME="thing" autofocus>

สิ่งนี้ช่วยให้คุณเปิดแบบฟอร์มโดยเลือกองค์ประกอบที่ต้องการ มันทำงานโดยใช้ออโต้โฟกัสที่จะกดอินพุตซึ่งจะส่งเหตุการณ์ออนโฟกัสซึ่งจะเป็นการเลือกข้อความ

หมายเหตุ:เมื่อคุณพิจารณาonclick="this.select()"เมื่อคลิกครั้งแรกตัวละครทั้งหมดจะถูกเลือกหลังจากนั้นคุณอาจต้องการแก้ไขบางสิ่งในอินพุตและคลิกระหว่างอักขระอีกครั้ง แต่จะเลือกอักขระทั้งหมดอีกครั้ง เพื่อแก้ไขปัญหานี้คุณควรใช้แทนonfocusonclick

ใช้งานได้จริงonclick="this.select();"แต่อย่าลืมที่จะรวมมันเข้าด้วยกันdisabled="disabled"- มันจะไม่ทำงานและคุณจะต้องเลือกด้วยตนเองหรือคลิกหลายครั้งเพื่อเลือกยัง หากคุณต้องการล็อคค่าเนื้อหาที่จะเลือกให้รวมกับแอททริบิreadonlyว

นี่คือคำตอบของ Shoban ที่นำมาใช้ซ้ำได้:

<input type="text" id="userid" name="userid"
 value="Please enter the user ID" onfocus="Clear(this);"
/>

function Clear(elem)
{
elem.value='';
}

ด้วยวิธีนี้คุณสามารถใช้สคริปต์ที่ชัดเจนสำหรับองค์ประกอบหลายรายการได้

คุณสามารถแทนที่

<input type="text" id="userid" name="userid" value="Please enter the user ID" />

ด้วย:

<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />

ตัวยึดตำแหน่งถูกใช้เพื่อแทนที่ค่าตามที่คุณต้องการให้ผู้คนสามารถพิมพ์ในกล่องข้อความโดยไม่ต้องคลิกหลาย ๆ ครั้งหรือใช้ ctrl + a ตัวยึดตำแหน่งทำให้มันไม่ใช่ค่า แต่ตามชื่อแนะนำตัวยึดสถานที่ นั่นคือสิ่งที่ใช้ในหลายรูปแบบออนไลน์ที่ระบุว่า "ชื่อผู้ใช้ที่นี่" หรือ "อีเมล" และเมื่อคุณคลิกที่ "อีเมล" จะหายไปและคุณสามารถเริ่มพิมพ์ได้ทันที

ทางออกที่แน่นอนสำหรับสิ่งที่คุณถามคือ:

<input type="text" id="userid" name="userid" value="Please enter the user ID" onClick="this.setSelectionRange(0, this.value.length)"/>

แต่ฉันคิดว่าคุณกำลังพยายามแสดง"โปรดป้อน ID ผู้ใช้"เป็นตัวยึดตำแหน่งหรือคำใบ้ในอินพุต ดังนั้นคุณสามารถใช้สิ่งต่อไปนี้เป็นโซลูชันที่มีประสิทธิภาพมากขึ้น:

<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />

นี่คือตัวอย่างใน React แต่สามารถแปลเป็น jQuery บน vanilla JS หากคุณต้องการ:

class Num extends React.Component {

    click = ev => {
        const el = ev.currentTarget;
        if(document.activeElement !== el) {
            setTimeout(() => {
                el.select();    
            }, 0);
        }
    }

    render() {
        return <input type="number" min={0} step={15} onMouseDown={this.click} {...this.props} />
    }
}

เคล็ดลับที่นี่คือการใช้onMouseDownเพราะองค์ประกอบได้รับการมุ่งเน้นไปแล้วตามเวลาที่เหตุการณ์ "คลิก" ยิง (และการactiveElementตรวจสอบจะล้มเหลว)

การactiveElementตรวจสอบเป็นสิ่งที่จำเป็นเพื่อให้ผู้ใช้สามารถวางเคอร์เซอร์ในตำแหน่งที่ต้องการโดยไม่ต้องเลือกอินพุตทั้งหมดอีกครั้ง

การหมดเวลาเป็นสิ่งที่จำเป็นเพราะมิฉะนั้นข้อความจะถูกเลือกและไม่ได้เลือกทันทีเพราะฉันเดาว่าเบราว์เซอร์ทำการตรวจสอบตำแหน่งเคอร์เซอร์หลังจากนั้น

และสุดท้ายel = ev.currentTargetสิ่งที่จำเป็นในการตอบโต้ก็คือReactเนื่องจาก React ใช้วัตถุเหตุการณ์อีกครั้งและคุณจะสูญเสียเหตุการณ์สังเคราะห์ตามเวลาที่ setTimeout ยิง

ปัญหาเกี่ยวกับการจับเหตุการณ์การคลิกคือการคลิกแต่ละครั้งในข้อความจะเลือกอีกครั้งในขณะที่ผู้ใช้อาจคาดหวังว่าจะเปลี่ยนตำแหน่งเคอร์เซอร์

สิ่งที่ใช้ได้ผลสำหรับฉันคือการประกาศตัวแปรให้เลือก SearchTextOnClick และตั้งค่าเป็นจริงโดยค่าเริ่มต้น ตัวจัดการคลิกตรวจสอบว่าตัวแปรยังคงเป็นจริง: ถ้าเป็นมันจะตั้งค่าเป็นเท็จและทำการเลือก () จากนั้นฉันมีตัวจัดการเหตุการณ์เบลอซึ่งทำให้มันกลับมาเป็นจริง

ผลลัพธ์จนถึงขณะนี้ดูเหมือนว่าพฤติกรรมที่ฉันคาดหวัง

(แก้ไข: ฉันถูกทอดทิ้งที่จะบอกว่าฉันพยายามจับภาพเหตุการณ์โฟกัสตามที่มีคนแนะนำ แต่ก็ไม่ได้ผล: หลังจากเหตุการณ์โฟกัสเกิดไฟไหม้เหตุการณ์การคลิกจะเริ่มขึ้นและยกเลิกการเลือกข้อความทันที)

คำถามนี้มีตัวเลือกว่าเมื่อใดเลือก. () ไม่ทำงานบนแพลตฟอร์มมือถือ: เลือกข้อความในฟิลด์อินพุตบนอุปกรณ์ iOS โดยใช้โปรแกรม (mobile Safari)

Html เช่นนี้ <input type="text" value="click the input to select" onclick="javascript:textSelector(this)"/>

และรหัส javascript โดยไม่ผูกมัด

function textSelector(ele){
    $(ele).select();
}

นี่เป็นกิจกรรมปกติสำหรับกล่องข้อความ

คลิก 1 - ตั้งโฟกัส

คลิก 2/3 (ดับเบิลคลิก) - เลือกข้อความ

คุณสามารถตั้งค่าโฟกัสที่กล่องข้อความเมื่อหน้าแรกโหลดเพื่อลด "เลือก" เป็นเหตุการณ์ดับเบิลคลิกเดียว

ใช้ "ตัวยึด" แทน "ค่า" ในช่องใส่ของคุณ

หากคุณใช้ AngularJS คุณสามารถใช้คำสั่งที่กำหนดเองเพื่อให้เข้าถึงได้ง่าย:

define(['angular'], function () {
    angular.module("selectionHelper", [])
    .directive('selectOnClick', function () {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {                
                element.on('click', function () {
                    this.select();
                });
            }
        };
    });
});

ตอนนี้เราสามารถใช้มันได้เช่นนี้

<input type="text" select-on-click ... />

ตัวอย่างอยู่กับ requirejs - ดังนั้นบรรทัดแรกและบรรทัดสุดท้ายสามารถข้ามได้หากใช้อย่างอื่น

หากใครต้องการทำเช่นนี้ในหน้าโหลด w / jQuery (หวานสำหรับช่องค้นหา) นี่คือทางออกของฉัน

jQuery.fn.focusAndSelect = function() {
    return this.each(function() {
        $(this).focus();
        if (this.setSelectionRange) {
            var len = $(this).val().length * 2;
            this.setSelectionRange(0, len);
        } else {
            $(this).val($(this).val());
        }
        this.scrollTop = 999999;
    });
};

(function ($) {
    $('#input').focusAndSelect();
})(jQuery);

บนพื้นฐานนี้โพสต์ ขอบคุณ CSS-Tricks.com

หากคุณเพียงแค่พยายามที่จะมีข้อความตัวยึดที่จะถูกแทนที่เมื่อผู้ใช้เลือกองค์ประกอบแล้วมันเป็นวิธีที่ดีที่สุดในการใช้placeholderคุณลักษณะในปัจจุบัน อย่างไรก็ตามหากคุณต้องการเลือกค่าปัจจุบันทั้งหมดเมื่อฟิลด์ได้รับการโฟกัสการรวมกันของ @Cory House และ @Toastrackenigma คำตอบน่าจะเป็นที่ยอมรับมากที่สุด ใช้focusและfocusoutเหตุการณ์ต่างๆด้วยตัวจัดการที่กำหนด / ปล่อยองค์ประกอบโฟกัสปัจจุบันและเลือกทั้งหมดเมื่อโฟกัส ตัวอย่าง angular2 / typescript มีดังต่อไปนี้ (แต่จะไม่สำคัญที่จะแปลงเป็นวานิลลา js):

แม่แบบ:

<input type="text" (focus)="focus()" (focusout)="focusout()" ... >

ส่วนประกอบคือ:

private focused = false;

public focusout = (): void => {
    this.focused = false;
};

public focus = (): void => {
    if(this.focused) return;
    this.focused = true;

    // Timeout for cross browser compatibility (Chrome)
    setTimeout(() => { document.execCommand('selectall', null, false); });
};