planetz Ответов: 2

Изменять текст в текстовом поле, которое находится внутри GridView с помощью JavaScript

Привет,

Как я могу удалить текст в фокусе и восстановить текст при размытии из текстового поля, которое находится внутри строки gridview? Я не хочу использовать кнопку. Просто нажмите на текстовое поле, чтобы удалить текст, и при потере фокуса текст будет восстановлен.
Значения текстовых полей изменяются и устанавливаются во время события grid_rowDataBound.
Это мои вопросы:
1. Как я могу получить номер строки gridview?
2. Как я могу получить идентификатор текстового поля?
3. Где привязать на JavaScript?

Что я уже пробовал:

я пытался:

функция фокусировки ()
{
document.getElementById ("txtbox"). value="";
}


Но обнаружил, что идентификатор меняется.

Karthik_Mahalingam

что делать, если пользователь вводит новые значения в текстовое поле?
использование jquery делает эту работу проще.

planetz

на самом деле пользователю нужно ввести значение. Но значение по умолчанию-NA или значения, которые они ввели ранее. Теперь, если пользователь нажимает на текстовое поле, то ему должно быть ясно, как вводить данные. Иначе старое значение вернется.

Karthik_Mahalingam

для нового текста он должен использовать только новый текст при размытии ?

planetz

Позвольте мне объяснить. Предположим, что в GridView databind есть 3 текстовых поля в трех строках. Один имеет значение 3, а два других NA. Эти значения помещаются во время события rowdatabound. Теперь, если пользователь нажмет на текстовое поле, содержащее 3, то 3 исчезнет, и текстовое поле будет очищено для ввода нового значения. Если пользователь щелкает из текстового поля, то старое значение, то есть 3, появится снова. Поэтому, если пользователь не заинтересован в изменении значения, будет отправлено старое значение. Короче говоря, пользователь может послать на любое количество.

Karthik_Mahalingam

проверьте решение.

2 Ответов

Рейтинг:
7

Richard Deeming

Нет необходимости в скрипте; просто используйте то placeholder атрибут[^]. Он поддерживается практически во всем кроме IE9 или более ранних версий[^].

Установите атрибут из кода-за:

protected void grid_rowDataBound(object sender, GridViewRowEventArgs e)
{
    var txt = (TextBox)e.Row.FindControl("txtname");
    txt.Attributes["placeholder"] = "A placeholder...";
}

или из разметки:
<asp:TextBox id="txtname" runat="server"

    placeholder="A placeholder..."

/>

planetz

Я думал об этом процессе, и он сработал. Правда, немного длинновато..Это должно быть из кода позади, так как заполнители имеют переменные значения.

Рейтинг:
15

Karthik_Mahalingam

обратитесь к этому образцу 

<html>
<head>
    <script src="jquery.js"></script>
    <script>

        $(function () {

            var initialValue = '';
            $(".TextBoxBlurEffect").on('focus', function () { 
                initialValue = this.value;
                this.value = '';
            }).on('blur', function () { 
                var value = this.value;
                if (value == '')
                    this.value = initialValue; 
            });


        });

    </script>

</head>
<body>

    <form id="form1" runat="server">
        <asp:GridView runat="server" ID="gv" AutoGenerateColumns="false">
            <Columns>
                <asp:TemplateField HeaderText="Test">
                    <ItemTemplate>
                        <asp:TextBox ID="txtbox1" CssClass="TextBoxBlurEffect" Text="NA" runat="server"> </asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

    </form>


</body>
</html>


protected void Page_Load(object sender, EventArgs e)
       {
           if (Page.IsPostBack) return;
           gv.DataSource = new int[] {1,2,3,4,5 };
           gv.DataBind();

       }



демонстрация:JSFiddle[^]

planetz

это не работает..!

Karthik_Mahalingam

вы добавили ссылку на jquery

Karthik_Mahalingam

проверьте демо-версию TextBox blur focus - JSFiddle[^]

planetz

проверил демо-версию...это именно то, что я хотел... я снова пройдусь по вашей демо-версии, проверю свой собственный код и вернусь....

Karthik_Mahalingam

Хорошо

planetz

Эй...я снова попробовал код.
это дает две ошибки:
1. Uncaught ReferenceError: $ не определен в строке " $(function () {".
2. Вам http://localhost:12345/jquery.js на "<сценарий СРЦ="jquery.js"&ГТ;&ЛТ;/скрипт>"

Karthik_Mahalingam

использовать это
&ЛТ;скрипт СРЦ="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&ГТ;&ЛТ;/скрипт>

planetz

Ух ты!!теперь он работает...!!

Karthik_Mahalingam

крутой