HTML+CSS تېخنىكىسى

input كىرگۈزۈش رامكىسىدىكى سۈكۈتتىكى خەتنى كۆرسىتىش ۋە يۇشۇرۇش

ماقالە مۇندەرىجىسى

ماۋزونى ئوقۇپ بولۇپ بۇ «قانداق گەپتۇ» دەپ ئويلاپ قالغان بولۇشۇڭلار مۇمكىن، بىراق دوستلارنىڭ ئۈنۈمنى كۆرگەندىن كېيىن چوقۇم ھېس قىلالايدىغانلىقىغا ئىشىنىمەن. مەزكۇر بلوگنىڭ ئۈستى تەرىپىدە ئىزدەش input رامكىسى بولۇپ، ماۋۇسنى رامكىغا ئېلىپ كېلىشتىن بۇرۇن ئۈستىدە «ئىزدەش» دېگەن خەت كۆرۈنۈپ تۇرىدۇ، ئەمما ماۋۇسنى ئۈستىگە ئېلىپ كېلىپ تۇنجى ھەرىپنى يازغاندا «ئىزدەش» دېگەن خەت كۆرۈنمەيدۇ دە سىز يازماقچى بولغان خېتىڭىزنى يازىسىز، ئەمما بۈگۈن سۆزلىمەكچى بولغان input ئىزدەش رامكىسىغا ماۋۇسنى ئېلىپ كېلىپ بىرنى چەكسىڭىز خەت يېزىشىڭىزنى ساقلاپ تۇرمايلا سۈكۈتتىكى خەت كۆرۈنمەيدۇ، ئەلۋەتتە بۈگۈن كەينىدىكى ئۈنۈمنى سۆزلەيمىز.

90% تور بەتلەردە ئىزدەش رامكىسى، تىزىملىتىش رامكىسى قاتارلىقلا تۆۋەندىكىدەك ئۇسۇلدا يېزىلغان، تۆۋەندىكى ئۇسۇلدا javascript نى html نىڭ ئىچىگىلا يېزىپ ئۈنۈمگە ئېرىشىدۇ، خۇددى style نى html نىڭ ئىچگە يېزىپ قويغانداك، ئەلۋەتتە بۇ خىل ئۇسۇل W3C نىڭ ئۆلچىمىگە ئۇيغۇن كەلسىمۇ مەن يەنىلا ئامال بار ئايرىپ يېزىشنى ياقتۇرىمەن.

<input type="text" value="Birni Chekseng Ochimen" onfocus="if(this.value == 'Birni Chekseng Ochimen') this.value = ''" onblur="if(this.value == '') this.value = 'Birni Chekseng Ochimen'" />

ئايرىپ يېزىش ئۈچۈن تۆۋەندىكى 3 باسقۇچنى بېسىپ ئۆتسىڭىزلاز كۇپايە.

html كودى

 type="text" id="input_test" value="ئىزدەش" />

jQuery كودى

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

script نى ئىجرا قىلىش

$(function() {
    var inputEl = $('#input_test'),
        defVal = inputEl.val();
    inputEl.bind({
        focus: function() {
            var _this = $(this);
            if (_this.val() == defVal) {
                _this.val('');
            }
        },
        blur: function() {
            var _this = $(this);
            if (_this.val() == '') {
                _this.val(defVal);
            }
        }
    });
})

ئۈنۈمىنى كۆرۈڭ

كۈچەپ بېسىڭ

مەزكۇر يازمنىڭ خەتكۈچى ، ، ، بىلەن مۇناسىۋەتلىك يازمىلار



5 باھا يېزىلىپ بوپتۇغۇ؟ سىزلا يازمىغان ئوخشايسىز ...

  • تەشنايى | 18:10 | 2012.12.14 جاۋاب

    كۈچەپ باسسام راستىنلا ئۈنۈمىنى كۆردۈم. قالتىسكە… :mrgreen:

  • يۇلغۇن | 02:56 | 2012.12.25 جاۋاب

    بۇ تېمىغا مۇناسىۋەتسىز ئىنكاس يازىدىغان بولدۇم، ئەپۇ قىلغايسىز.
    مۇمكىن بولسا http://p-skin09.blogbus.com/ بۇ يەردە ئىشلەتكەن ئۇسلۇبتىن بىر نۇسخا ئەۋەتىپ بىرەمسىز. ئېلخەت ئادرىسىم : yulhun2@163.com رەھمەت. ئاۋارە قىلدىم.

    • پرېستان | 23:31 | 2012.12.28 جاۋاب

      كەچۈرگەيسىز، بلوگبۇسنىڭ ئۇسلۇبلىرى كومپىيۇتېرىمدا يوق ئىكەن.

  • كۈسەنىم | 13:29 | 2013.01.4 جاۋاب

    بۇ…. بۇ كودلارنى نەگە چاپلايمىز بىلەلمىدىم :|

    • پرېستان | 01:59 | 2013.01.6 جاۋاب

      «كۈچەپ بېسىڭ» دېگەن كونۇپكىنى بېسىپ، ئېچىلغان بەتتىكى مىسالنىڭ ئەسلى كودىنى كۆرۈڭ.

باھا يوللاش (قەلب سۆزلىرىڭىزدىن قالدۇرۇپ كىتىڭ)


icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif