เลือกข้อความที่โฟกัสอินพุต

ฉันมีการป้อนข้อความ เมื่ออินพุตได้รับโฟกัสฉันต้องการเลือกข้อความภายในอินพุต

ด้วย jQuery ฉันจะทำเช่นนี้:

<input type="text" value="test" />

$("input[type=text]").click(function() {
    $(this).select();
    // would select "test" in this example
});

ฉันค้นหาไปรอบ ๆ เพื่อลองหาวิธีเชิงมุม แต่ตัวอย่างส่วนใหญ่ที่ฉันพบคือการจัดการกับคำสั่งที่กำลังดูคุณสมบัติโมดอลสำหรับการเปลี่ยนแปลง ฉันสมมติว่าฉันต้องการคำสั่งที่คอยดูอินพุตที่ได้รับโฟกัส ฉันจะทำอย่างไร

วิธีทำใน Angular คือสร้างคำสั่งที่กำหนดเองซึ่งจะทำการเลือกอัตโนมัติให้กับคุณ

module.directive('selectOnClick', ['$window', function ($window) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.on('click', function () {
                if (!$window.getSelection().toString()) {
                    // Required for mobile Safari
                    this.setSelectionRange(0, this.value.length)
                }
            });
        }
    };
}]);

ใช้คำสั่งเช่นนี้:

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

View demo

Update1 : ลบการพึ่งพา jQuery

Update2 : จำกัด เป็นแอตทริบิวต์

Update3 : ใช้งานได้ใน Safari บนมือถือ อนุญาตให้เลือกบางส่วนของข้อความ (ต้องใช้ IE> 8)

นี่คือคำสั่งขั้นสูงที่หลีกเลี่ยงการเลือกข้อความซ้ำเมื่อผู้ใช้คลิกเพื่อวางเคอร์เซอร์ในช่องป้อนข้อมูล

module.directive('selectOnClick', function () {
    return {
        restrict: 'A',
        link: function (scope, element) {
            var focusedElement;
            element.on('click', function () {
                if (focusedElement != this) {
                    this.select();
                    focusedElement = this;
                }
            });
            element.on('blur', function () {
                focusedElement = null;
            });
        }
    };
})

นี่เป็นคำตอบเก่าสำหรับ Angular 1.x

วิธีที่ดีกว่าคือใช้ng-clickคำสั่งในตัว:

<input type="text" ng-model="content" ng-click="$event.target.select()" />

แก้ไข:

ตามที่JoshMBได้เตือนไว้อย่างกรุณา; ไม่อนุญาตให้อ้างถึงโหนด DOM ใน Angular 1.2+ อีกต่อไป ดังนั้นฉันจึงย้าย$event.target.select()เข้าไปในคอนโทรลเลอร์:

<input type="text" ng-model="content" ng-click="onTextClick($event)" />

จากนั้นในคอนโทรลเลอร์ของคุณ:

$scope.onTextClick = function ($event) {
    $event.target.select();
};

นี่คือไวโอลินตัวอย่างเช่น

โซลูชันที่เสนอทั้งสองวิธีไม่ได้ผลสำหรับฉัน หลังจากการวิจัยอย่างรวดเร็วฉันพบสิ่งนี้:

module.directive('selectOnFocus', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var focusedElement = null;

            element.on('focus', function () {
                var self = this;
                if (focusedElement != self) {
                    focusedElement = self;
                    $timeout(function () {
                        self.select();
                    }, 10);
                }
            });

            element.on('blur', function () {
                focusedElement = null;
            });
    }

  }

});

เป็นการผสมผสานของโซลูชันต่างๆที่นำเสนอ แต่ใช้ได้ทั้งกับการคลิกและโฟกัส (คิดว่าออโต้โฟกัส) และอนุญาตให้เลือกค่าบางส่วนในอินพุตด้วยตนเอง

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

ฉันพบว่าวิธีนี้เป็นพฤติกรรม UX ที่คาดไว้

ใช้ng-focus

ตัวเลือกที่ 1:รหัสแยก

<input type="text" ng-model="content" ng-focus="onTextFocus($event)" />

และในตัวควบคุม

$scope.onTextFocus = function ($event) {
  $event.target.select();
};

ตัวเลือกที่ 2:เป็นอีกทางเลือกหนึ่งที่คุณสามารถรวมโค้ดด้านบนลงใน "one-liner" นี้ได้ (ฉันไม่ได้ทดสอบ แต่ควรใช้งานได้)

<input type="text" ng-model="content" ng-focus="$event.target.select()" />

ในเชิงมุม 2 สิ่งนี้ใช้ได้กับฉันทั้งใน Chrome และ Firefox:

<input type="text" (mouseup)="$event.target.select()">

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

นอกจากนี้ยังทำให้ไม่จำเป็นต้องตรวจสอบว่าองค์ประกอบนั้นโฟกัสอยู่แล้วตามที่คำตอบของ Tamlyn แนะนำหรือไม่

app.directive('selectOnClick', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.on('focus', function () {
                this.select();
            });
        }
    };
});

ไม่จำเป็นต้องมีคำสั่งเพียงเพิ่มonfocus="this.select()"จาวาสคริปต์ดั้งเดิมในองค์ประกอบอินพุตหรือพื้นที่ข้อความ

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

module.directive('selectOnClick', function ($timeout) {
return {
    restrict: 'A',
    link: function (scope, element, attrs) {
        var prevClickElem = null; //Last clicked element
        var ignorePrevNullOnBlur = false; //Ignoring the prevClickElem = null in Blur massege function

        element.on('click', function () {
            var self = this;
            if (prevClickElem != self) { //First click on new element
                prevClickElem = self; 
                $timeout(function () { //Timer
                    if(self.type == "number")
                        self.select();
                    else
                        self.setSelectionRange(0, self.value.length)
                }, 10);
            }
            else { //Second click on same element
                if (self.type == "number") {
                    ignorePrevNullOnBlur = true;
                    self.blur();
                }
                else
                    self.setSelectionRange(self.value.length, self.value.length); //deselect and set cursor on last pos
            }
        });

        element.on('blur', function () {
            if (ignorePrevNullOnBlur == true)
                ignorePrevNullOnBlur = false; //blur called from code handeling the second click 
            else
                prevClickElem = null; //We are leaving input box
        });
    }
}

})

วิธีที่ง่ายที่สุดในการเลือกข้อความทั้งหมดเมื่อคลิกหรือโฟกัสหรือแท็บคือ !!!:

<input (focus)="inputFocused($event)">

...

inputFocused(event: any){
    event.target.select()
}