Making an "input" button text non editable

Question

Using a javascript dictionary to create an assignment list, there are two elements: text (the title) and text2 (a hash anchor link)

    var cell2 = row.insertCell(1);
    var element2 = document.createElement("input");
    element2.type = "viewButton";
    element2.value = todoDictionary["text"];
    var link= todoDictionary["text2"];
    element2.id = rowID;
    element2.setAttribute("onclick","window.location.hash = link");
    element2.className = "viewButton";
    cell2.appendChild(element2);

When the list is diplayed, when I click on the item title, it temporarily brings up the keyboard before going to the link. I assume it's because it is an "input" item. I tried "label" and "text area" instead of "input" in the document.createElement, but the title doesn't show. any way to make it so it's still a button but the title isn't editable?

EDIT: New issue @david thomas When I change the element type to button, it now ignores the "viewButton" css that I have put into the file. On first launch, it keeps the proper style. On second launch, it defaults to the jquery CSS. But if I add new items, they come in the right style.

if I leave the element type to "viewButton" the style stays, but it also allows editing of the text.

I had this style issue happen before, which I fixed by adding the "viewButton" style to the jquery CSS. CSS style not sticking

Any ideas on how to override the style?

Noel

score 2 · Answer 1 · edited Dec 08 '13 at 20:07

2

Why you use element2.type = "viewButton"? Try type="submit" or <button>.

edited Dec 08 '13 at 20:07

JJJ

32,902
20
89
102

answered Dec 08 '13 at 20:06

Bohdan Yurov

365
5
9

David Thomas · Answer 2 · 2013-12-08T20:12:44.943

2

I'd imagine the problem is that the type is invalid, and therefore the input is being rendered as a text-input instead (unless there's more JavaScript or jQuery happening elsewhere to remedy that?).

That said, you could simply use:

// set the element to a button type:
element2.type = 'button';
// prevent the element from being able to receive focus:
element2.readonly = true;

Though if you want a button, you might as well create a button element:

var element2 = document.createElement('button');

References:

edited Dec 08 '13 at 20:12

answered Dec 08 '13 at 20:07

David Thomas

249,100
51
377
410

Thank you both, that was the issue. I was using "viewButton" as it was in the code that someone else had used that I was adapting to my use. I suppose there isnt a way to have both be the answer to this question? Noel – Noel Chenier Dec 08 '13 at 20:55

score 0 · Answer 3 · edited May 23 '17 at 12:29

0

I believe you meant

element2.type = "button"

I found this SO question about the "button" type: <button> vs. <input type="button" />. Which to use?

edited May 23 '17 at 12:29

Community

1
1

answered Dec 08 '13 at 21:13

millertime

23
5

New issue @david thomas When I change the element type to button, it now ignores the "viewButton" css that I have put into the file. On first launch, it keeps the proper style. On second launch, it defaults to the jquery CSS. But if I add new items, they come in the right style. if I leave the element type to "viewButton" the style stays, but it also allows editing of the text. I had this style issue happen before, which I fixed by adding the "viewButton" style to the jquery CSS. http://stackoverflow.com/questions/20413611/css-style-not-sticking Any ideas on how to override the style? Noel – Noel Chenier Dec 08 '13 at 23:27

Making an "input" button text non editable

3 Answers3